scrollTop和animate的结合，使页面平滑滚动；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #full, #full-btm{ margin-left: 495px!important; width: 20px!important; height: 40px!important; position: absolute; position:fixed; left:50%; top:520px; z-index:100; text-align:center; cursor:pointer;} #full img, #full-btm img{ width: 100%!important; height: auto!important;} #full-top{ position:fixed; left:50%; top:520px; margin-left:495px; z-index:100; text-align:center; cursor:pointer; } #full-btm{ position:fixed; left:50%; top:550px; z-index:100; text-align:center; cursor:pointer; } </style> </head> <body style="height: 2000px;"> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> <div id="full-btm"> <a><img src="http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/back-btm.png" width="20" border=0 alt="跳到底部" title="跳到底部"></a> </div> <script type="text/javascript"> jQuery('#full-btm').click(function(){ jQuery('html, body').animate({scrollTop:jQuery(document).height()}, 'slow'); return false; }); </script> <div id="full-top"> <a><img src="http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/back-top.png" width="20" border=0 alt="返回顶部" title="返回顶部"></a> </div> <script type="text/javascript"> jQuery('#full-top').click(function(){ jQuery('html, body').animate({scrollTop:0}, 'slow'); return false; }); </script> </body> </html>
参考 WEB前端---伯乐在线 ：http://web.jobbole.com