在这篇文章中，我将通过本教程向您展示了如何创建一个平滑的滚动效果，使用jQuery。让您可以滚动到你的网页的顶部或底部
它是如何工作的
首先，加载jquery库在</ head>标签结束前：
复制代码 代码如下:
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.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();
您可能感兴趣的文章:
- 基于jQuery实现歌词滚动版音乐播放器的代码
- JQuery插件iScroll实现下拉刷新，滚动翻页特效
- jquery实现简单的无缝滚动
- jquery easyui滚动条部分设置介绍
- 六款帮助你实现惊艳视差滚动效果的jQuery插件
- 使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- jQuery实现将div中滚动条滚动到指定位置的方法
- JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
- jQuery实现的简单歌词滚动功能示例
