Heim Web-Frontend js-Tutorial jQuery创建平滑的页面滚动(顶部或底部)_jquery

jQuery创建平滑的页面滚动(顶部或底部)_jquery

May 16, 2016 pm 05:41 PM
glatt 页面滚动 Spitze

在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery。让您可以滚动到你的网页的顶部或底部

它是如何工作的
首先,加载jquery库在 head>标签结束前:

复制代码 代码如下:

jQuery滚动到底部:

链接:
Scroll to bottomjQuery
复制代码 代码如下:



它是如何工作的
第一行代码在页面加载之前执行
$(document).ready(function(){当连接的.scrollToBottom类被点击的时候执行{}里面的动作

$(document).ready(function(){
$('a.scrollToBottom').click(function(){
});
})在这个函数中,执行这个代码
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;当一个链接被点击的代码将在函数内部运行,scrollTop的功能是使用平滑滚动效果。上面的代码将滚动到页面底部,使用窗口的高度,以确定底部高度。使用“slow”,“medium”和“fast”的速度控制,我使用了'slow。
jQuery的滚动到顶部
首先,插入一个链接到你的网页页脚部分,当被点击的jQuery代码将执行。动画的功能。是非常重要的,因为它是在jQuery中引用类的链接。
链接:
Scroll to bottomjQuery
复制代码 代码如下:



它是如何工作的
当在页面加载类。scrollToTop的链接被点击时的jQuery将执行此
$('html, body').animate({scrollTop:0}, 'slow');
return false;.animate()方法使我们能够创建任何数字的CSS属性的动画效果,scrollTop的功能设置为0,这代表了滚动条在最上方的位置,“slow”是指动画将运行的速度,在你会注意到这一行:
return false;这可以防止的默认动作被触发的事件,在我们的例子中,它可以防止用户链接。
也可以这样
复制代码 代码如下:

event.preventDefault();
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie implementiert man die Funktion zum Scrollen der Seite nach oben in JavaScript? Wie implementiert man die Funktion zum Scrollen der Seite nach oben in JavaScript? Oct 19, 2023 am 11:16 AM

Wie implementiert man die Funktion zum Scrollen der Seite nach oben in JavaScript? Im Webdesign benötigen wir manchmal eine Funktion, die schnell zum Seitenanfang zurückkehren kann, sodass der Benutzer nicht manuell durch die Seite scrollen muss. Diese Funktion wird normalerweise über eine Schaltfläche „Zurück nach oben“ implementiert. In diesem Artikel zeige ich Ihnen, wie Sie JavaScript verwenden, um diese Funktionalität zu erreichen, und stelle detaillierte Codebeispiele bereit. Zuerst müssen wir der HTML-Datei ein Schaltflächenelement hinzufügen, um die Funktion „Zurück zum Anfang“ auszulösen. Das können Sie zum Beispiel

Das WeChat-Applet implementiert den Effekt zur Überwachung des Seitenscrollens Das WeChat-Applet implementiert den Effekt zur Überwachung des Seitenscrollens Nov 21, 2023 am 08:18 AM

Leider kann ich keine spezifischen Codebeispiele bereitstellen. Wenn Sie wissen möchten, wie Sie den Seiten-Scroll-Überwachungseffekt im WeChat-Applet implementieren, können Sie es selbst ausprobieren, indem Sie die folgenden Schritte ausführen: Erstellen Sie ein neues WeChat-Applet-Projekt. Schreiben Sie die Seitenstruktur in die WXML-Datei, einschließlich der Elemente, die eine Scroll-Überwachung erfordern. Legen Sie den Seitenstil in der WXSS-Datei fest, einschließlich des Stils des Scroll-Listening-Elements. Schreiben Sie die Scroll-Überwachungslogik in die js-Datei. Sie können den Scroll-Überwachungseffekt erzielen, indem Sie das Seiten-Scroll-Ereignis abhören. Sehen Sie sich den Effekt mit den WeChat-Entwicklertools in der Vorschau an.

Das WeChat-Applet realisiert den Effekt des Scrollens der Seite zu einer bestimmten Position Das WeChat-Applet realisiert den Effekt des Scrollens der Seite zu einer bestimmten Position Nov 21, 2023 pm 12:58 PM

Das WeChat-Applet implementiert den Effekt des Scrollens der Seite zu einer bestimmten Position. Das Applet ist in den letzten Jahren eine sehr beliebte Methode zur Entwicklung mobiler Anwendungen. In Miniprogrammen ist es häufig erforderlich, den Effekt des Scrollens zu einer bestimmten Position auf der Seite zu erzielen. In diesem Artikel wird erläutert, wie diese Funktion in Miniprogrammen implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Um den Effekt des Scrollens der Seite an die angegebene Position zu erzielen, gibt es zwei Hauptaspekte der Arbeit: Der eine besteht darin, die Positionsinformationen des Elements an der angegebenen Position abzurufen, und der andere darin

So erzielen Sie mit CSS einen reibungslosen Scrolleffekt So erzielen Sie mit CSS einen reibungslosen Scrolleffekt Nov 21, 2023 pm 01:13 PM

So erzielen Sie mit CSS einen reibungslosen Bildlaufeffekt. Im Webdesign und in der Webentwicklung ist der Bildlaufeffekt ein sehr häufiger und cooler Effekt, der den Benutzern ein besseres Erlebnis bieten kann. Um einen reibungslosen Scrolleffekt zu erzielen, können Sie dies durch einige CSS-Techniken erreichen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS einen reibungslosen Bildlaufeffekt erzielen, und es werden spezifische Codebeispiele bereitgestellt. 1. Verwenden Sie Ankerpunkte, um ein reibungsloses Scrollen interner Seiten zu erreichen. Ein Ankerpunkt ist eine Markierung in HTML. Sie können eine bestimmte Position auf der Seite als Ankerpunkt definieren und diese über den Ankerpunktwert in der URL positionieren. in glatt

PHP implementiert Fähigkeiten zum Scrollen von Seiten im WeChat-Applet PHP implementiert Fähigkeiten zum Scrollen von Seiten im WeChat-Applet Jun 01, 2023 am 09:40 AM

In den letzten Jahren sind WeChat-Miniprogramme aus dem Leben der Menschen nicht mehr wegzudenken. Da sich die Technologie ständig weiterentwickelt, beginnen immer mehr Entwickler, verschiedene Techniken zu nutzen, um bessere Miniprogramme zu implementieren. Eine davon ist die Seiten-Scroll-Technik. In WeChat-Miniprogrammen können Techniken zum Scrollen von Seiten eine reibungslosere Benutzererfahrung erzielen und die Gesamtqualität des Miniprogramms verbessern. Bei der Implementierung von Seitenscrolltechniken kann PHP ebenfalls eine große Rolle spielen. Im Folgenden erfahren Sie, wie Sie mit PHP das Scrollen von Seiten in WeChat-Miniprogrammen implementieren

Wie verwende ich Routing, um die Steuerung und Positionierung des Seitenscrollens in Vue zu implementieren? Wie verwende ich Routing, um die Steuerung und Positionierung des Seitenscrollens in Vue zu implementieren? Jul 21, 2023 pm 05:42 PM

Wie verwende ich Routing, um die Steuerung und Positionierung des Seitenscrollens in Vue zu implementieren? In Vue-Anwendungen kann Routing verwendet werden, um Sprünge und Navigation zwischen Seiten zu erreichen. Zusätzlich zur grundlegenden Sprungfunktion können wir Routing auch verwenden, um die Steuerung und Positionierung des Seitenscrollens zu erreichen und so die Benutzererfahrung und den Effekt der Seitennavigation zu verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe von Routing die Steuerung und Positionierung des Seitenscrollens in Vue implementieren und Codebeispiele als Referenz bereitstellen. Zuerst müssen wir VueRouter installieren und in das Vue-Projekt einführen, den offiziell von Vue bereitgestellten Routing-Manager

So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundeffekt auf Webseiten So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundeffekt auf Webseiten Oct 24, 2023 am 09:02 AM

So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundeffekt von Webseiten. Der Hintergrund ist ein sehr wichtiger Teil des Webdesigns, der den visuellen Effekt und das Benutzererlebnis der Seite verbessern kann. Herkömmliche Webseitenhintergründe sind normalerweise statisch, aber durch die Verwendung reiner CSS-Technologie können wir einen sanften Scroll-Hintergrundeffekt erzielen und so der Webseite einen dynamischeren und lebendigeren visuellen Effekt verleihen. In diesem Artikel stellen wir vor, wie Sie mit CSS einen sanften Bildlauf-Hintergrundeffekt erzielen, und stellen spezifische Codebeispiele bereit. 1. Vorbereitung vor dem Start, um einen reibungslosen Scroll-Hintergrundeffekt zu erzielen

Ist es in JavaScript eine gute Praxis, alle Deklarationen oben zu platzieren? Ist es in JavaScript eine gute Praxis, alle Deklarationen oben zu platzieren? Sep 07, 2023 pm 11:01 PM

Ja, es empfiehlt sich, alle JavaScript-Deklarationen oben zu platzieren. Schauen wir uns ein Beispiel an – Beispiel <html> <head> <title>JavaScriptStringmatch()Method</title> </head> <body> &am

See all articles