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 Artikel -Tags

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?

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

Das WeChat-Applet implementiert den Effekt zur Überwachung des Seitenscrollens

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 Scrolleffekt

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

PHP implementiert Fähigkeiten zum Scrollen von Seiten im WeChat-Applet

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 auf Webseiten

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

Ist es in JavaScript eine gute Praxis, alle Deklarationen oben zu platzieren?

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?

Wie verwende ich Vue Router, um die Verhaltenssteuerung beim Scrollen von Seiten zu implementieren? Wie verwende ich Vue Router, um die Verhaltenssteuerung beim Scrollen von Seiten zu implementieren? Jul 21, 2023 pm 06:49 PM

Wie verwende ich Vue Router, um die Verhaltenssteuerung beim Scrollen von Seiten zu implementieren?

See all articles