返回顶部小火箭

来源：互联网发布：淘宝店怎么来推广编辑：程序博客网时间：2024/05/18 02:08
利用window.scrollTo(x,y) 把内容滚动到指定坐标
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .top{            position: fixed;            right: 50px;            bottom: 100px;            display: none;        }    </style>    <script src="my.js" type="text/javascript"></script>    <script>        window.onload = function () {            var gotop = $("gotop");            var start = 0,end =0; //start是开始位置，end是结束位置 结束位置为0.            var timer = null; //定时器            var scrollTop = 0;            window.onscroll = function () {                scroll().top> 200 ? show(gotop) :hide(gotop);                start = scroll().top;            }            gotop.onclick = function () {                end=0;                timer = setInterval(function(){                    start = start + (end - start) /10;                    window.scrollTo(0,start);  //把内容滚动到指定坐标                    if(start == end){                        clearInterval(timer);                    }                },10);            }        }    </script></head><body>    <div class="top" id="gotop">        <img src="images/gotop.jpg" alt=""/>    </div>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p>    <p>这里是很多的文字</p></body></html>
0 0