使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）
采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置，从而看起来会非常高大上。
滚动到顶部：
$('.scroll_top').click(function(){$('html,body').animate({scrollTop:'0px'},800);});
滚动到指定位置：
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top},800);});
完整实例源码参考：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js平滑滚动到顶部、底部、指定地方</title>
<scripttype="text/javascript"src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<style>
.box{height:200px;width:100%;background:#ccc;margin:10px0;}
.location{position:fixed;right:0;bottom:10px;width:20px;background:#FFC;padding:5px;cursor:pointer;color:#003};
</style>
</head>
<body> <div></div> <div></div> <div></div> <div></div> <div>产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> <div></div> <div></div> <div></div> <div></div> <div></div>
<div> <p>返回顶部</p> <p>产品介绍</p> <p>滑到底部</p> </div> <scripttype="text/javascript"> jQuery(document).ready(function($){ $('.scroll_top').click(function(){$('html,body').animate({scrollTop:'0px'},800);}); $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top},800);}); $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top},800);}); }); </script> </body> </html>
热门推荐
1 训练狗狗憋尿
2 狗狗追踪训练
3 狗狗训练要多少钱
5 深圳狗狗训练
6 训练狗狗唤回
7 狗狗叫怎么训练
8 狗狗训练班
10 狗狗社会化训练
11 狗狗叫回训练
12 广州狗狗训练学校
13 狗狗训练躺下
14 狗狗随行训练
15 训练狗狗巡回
16 狗狗要怎么训练
17 狗狗喂食训练
18 训练狗狗躺下