返回顶部小火箭

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            width: 2000px;
        }
       .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");
            window.onscroll = function() {
                scroll().top > 0 ? show(goTop) : hide(goTop);  // 如果大于0 就显示 否则隐藏
                leader = scroll().top;  // 把 卷去的头部 给  起始位置
                console.log(scroll().top);
            }
            var leader = 0,target = 0,timer = null;
            // leader 起始位置  target  目标位置
            goTop.onclick = function() {
                target = 0;  //  点击完毕之后 奔向0 去的  不写也可以
                timer = setInterval(function() {
                    leader = leader + (target - leader ) / 10;
                    window.scrollTo(0,leader);  // 去往页面中的某个位置
                    if(leader == target)
                    {
                        clearInterval(timer);
                    }
                },20);

            }

        }
    </script>
</head>
<body>
<div id="gotop" class="top">
    <img src="images/Top.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>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
</body>
</html>

my.js为自己封装的小插件

/**
 * Created by andy on 2015/11/19.
 */
function $(id) {return document.getElementById(id);}
function show(obj) { obj.style.display = "block";}
function hide(obj) { obj.style.display = "none";}
function scroll() {
    if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
    {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
    // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    {
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return { //  剩下的肯定是怪异模式的
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}

 

posted @ 2018-05-05 10:51  小李HH  阅读(476)  评论(0)    收藏  举报