JS案例-返回到顶部

简单实用
效果演示：
点击一下缓动到头部
源码：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: fixed;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
            border: 1px solid #000;
        }
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
            //难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。
            //      技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
            //步骤：
            //1.老三步
            var img = document.getElementsByTagName("img")[0];
            window.onscroll = function () {
                //被卷去的距离大于200显示小火箭，否则隐藏
                //2.显示隐藏小火箭
                if(scroll().top>1000){
                    img.style.display = "block";
                }else{
                    img.style.display = "none";
                }
                //每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
                leader = scroll().top;
            }
            //3.缓动跳转到页面最顶端（利用我们的缓动动画）
            var timer = null;
            var target = 0; //目标位置
            var leader = 0; //显示区域自身的位置
            img.onclick = function () {
                //技术点：window.scrollTo(0,0);
                //要用定时器，先清定时器
                clearInterval(timer);
                timer = setInterval(function () {
                    //获取步长
                    var step = (target-leader)/10;
                    //二次处理步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader +step;
                    //显示区域移动
                    window.scrollTo(0,leader);
                    //清除定时器
                    if(leader <= 0){
                        clearInterval(timer);
                    }
                },25);
            }
        }
    </script>

</head>
<body>
    <img src="images/Top.jpg"/>
    <div>
        我是最顶端.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
    </div>
</body>
</html>
JS案例-返回到顶部

推荐阅读更多精彩内容
