jQuery创建平滑的页面滚动(顶部或底部)_jquery
May 16, 2016 pm 05:41 PM在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用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();

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wie implementiert man die Funktion zum Scrollen der Seite nach oben in JavaScript?

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

So erzielen Sie mit CSS einen reibungslosen Scrolleffekt

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

So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundeffekt auf Webseiten

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 Vue Router, um die Verhaltenssteuerung beim Scrollen von Seiten zu implementieren?
