在页面设计中，有时候需要创建一些点击滚动的效果，如：返回顶部；点击导航栏滚动到指定版块等。较为简单方便的就是采用锚点进行页面跳转，如<a href="#bottom">直接滚动到ID为bottom的底部版块，但整个滚动过程较为生硬。本文使用jQuery animate特效，实现平滑的滚动效果。

下面是jQuery代码：

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){ 
event.preventDefault();
$('html,body').animate({scrollTop:$('.demo').offset().top},1000);
});
});
</script>

注意：要先引入jQuery库。

上述代码可以简述为：当我们点击一个类名为“scroll”的元素时，将发生页面滑动，滑动位置为类名为“demo”的元素处，整个过程持续1000毫秒。

其中.scroll .demo 1000根据实际情况进行更改。

返回顶部样例

$('.demo').offset().top的意思是类名为demo的元素垂直偏移页面顶部的距离，那么返回顶部的代码应该这样的

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".top").click(function(event){ 
event.preventDefault();
$('html,body').animate({scrollTop:'0px'},1000);
});
});
</script>

<a>标签锚点定位

如果你想使用<a href="#demo">锚点定位来处理平滑滚动，如点击导航栏滑动到指定版块，那么有一个更高效的代码

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){ 
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>

其中$(this.hash)指的就是被点击这个<a>标签的锚点值，例如我要点击<a href="#demo" class="scroll"></a>这个元素，那么页面将会滑动到id为demo的元素处。这段代码的优势就是自动选择锚点值，只需部署一次js，即可实现多处点击的效果。

本例代码使用场景广泛，效果体验友好，是一段非常经典的jQuery特效，但记得先引入jQuery库文件。