转的滚动事件，慢慢滚到顶部或者指定位置
Posted 吴皓杰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了转的滚动事件，慢慢滚到顶部或者指定位置相关的知识，希望对你有一定的参考价值。
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部、到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下
滚动到顶部：
$(\'.scroll_top\').click(function(){$(\'html,body\').animate({scrollTop: \'0px\'}, 800);});
滚动到指定位置：
$(\'.scroll_a\').click(function(){$(\'html,body\').animate({scrollTop:$(\'.a\').offset().top}, 800);});
完整实例源码参考：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js平滑滚动到顶部、底部、指定地方</title> <script type="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:10px 0;} .location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003}; </style> </head> <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box bottom"></div> <div class="location"> <p class="scroll_top">返回顶部</p> <p class="scroll_a">产品介绍</p> <p class="scroll_bottom">滑到底部</p> </div> <script type="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>
以上是关于转的滚动事件，慢慢滚到顶部或者指定位置的主要内容，如果未能解决你的问题，请参考以下文章