1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta charset=UTF-8>
    5. <title>SCROLL</title>
    6. <style type="text/css">
    7. </style>
    8. <script type="text/javascript">
    9.     var goToWhere = function (where)
    10.     {
    11.         var me = this;
    12.         me.site = [];
    13.         me.sleep = me.sleep ? me.sleep : 26;
    14.         me.fx = me.fx ? me.fx : 26;
    15.         clearInterval (me.interval);
    16.         var dh = document.documentElement.scrollHeight || document.body.scrollHeight;
    17.         var height = !!where ? dh : 0;
    18.         me.interval = setInterval (function ()
    19.         {
    20.             var top = document.documentElement.scrollTop || document.body.scrollTop;
    21.             var speed = (height - top) / me.fx;
    22.             if (speed === me.site[0])
    23.             {
    24.                 window.scrollTo (0, height);
    25.                 clearInterval (me.interval);
    26.             }
    27.             window.scrollBy (0, speed);
    28.             me.site.unshift (speed);
    29.         }, me.sleep);
    30.     };
    31. </script>
    32. </head>
    33. <body>
    34.     <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>
    35.     <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>
    36.     <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>
    37.     <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>
    38.     <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>
    39.     <div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>
    40.     <div id="back-up" onclick="goToWhere(0)"
    41.         style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回顶部</div>
    42.     <div id="back-up" onclick="goToWhere(1)"
    43.         style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
    44. </body>
    45. </html>

    实现效果
    image.png
    goToWhere(0) ———————————-> 返回顶部
    goToWhere(1) ———————————-> 返回底部