使用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>
热门推荐
10 生日祝福语古朴简短独特
11 高温早安祝福语简短精辟
12 毕业祝福语保安文案简短
13 祝福语献给老人的话简短
14 男升职祝福语大全简短
15 送给员工美好祝福语简短
16 升职蛋糕祝福语大全简短
17 毕业创意蛋糕祝福语简短
18 预祝高尔夫的祝福语简短