返回顶部
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> #to_top { width: 30px; height: 40px; font: 14px/20px arial; text-align: center; background: #06c; position: fixed; cursor: pointer; color: #fff; left: 1250px; top: 500px; } </style> </head> <body style="height: 2000px;"> <div id="to_top">返回顶部</div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function (){ //回到顶部 $(‘#to_top‘).click(function () { var $body = $(document.body); var $html = $(document.documentElement); //使用scrollTop()：瞬间滚动到顶部 //$(‘html,body‘).scrollTop(0); //使用scrollTop()：平滑滚动到顶部 var offset = $body.scrollTop() + $html.scrollTop(); if(offset===0) { return; } var totalTime = 300; var intervalTime = 30; var itemOffset = offset/(totalTime/intervalTime); var intervalId = setInterval(function () { offset -= itemOffset; if(offset<=0) { offset = 0; clearInterval(intervalId); } $(‘html,body‘).scrollTop(offset); }, intervalTime); //使用动画：平滑滚动到顶部 //$(‘body,html‘).animate({scrollTop:0},300); }) }); </script> </body> </html>