使用jQuery来创建平滑的页面滚动

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

 

它是如何工作的

首先，加载jquery库在</ head>标签结束前：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

jQuery滚动到底部：

 

链接：

<a href="#" class="scrollToBottom">Scroll to bottom</a>

jQuery

<script type="text/javascript">

$(document).ready(function(){

 // Scroll page to the bottom
 $('a.scrollToBottom').click(function(){

 $('html, body, .content').animate({scrollTop: $(document).height()}, 300);

 return false;

 });
})
</script>

它是如何工作的：

第一行代码在页面加载之前执行

$(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中引用类的链接。

链接：

<a href="#" class="scrollToTop">Scroll to bottom</a>

jQuery

<script type="text/javascript">

$(document).ready(function(){

 $('a.scrollToTop').click(function(){

 $('html, body').animate({scrollTop:0}, 'slow');

 return false;

 });

})
</script>

它是如何工作的：

当在页面加载类。scrollToTop的链接被点击时的jQuery将执行此

$('html, body').animate({scrollTop:0}, 'slow');

return false;

.animate()方法使我们能够创建任何数字的CSS属性的动画效果，scrollTop的功能设置为0，这代表了滚动条在最上方的位置，“slow”是指动画将运行的速度，在

你会注意到这一行：

<code>return false;</code>

这可以防止的默认动作被触发的事件，在我们的例子中，它可以防止用户链接。

也可以这样：

event.preventDefault();

Demo