js初学者腾讯视频回到顶部事件模拟即详解（仅供参考）

最新推荐文章于 2021-05-17 17:53:52 发布

哲晨

最新推荐文章于 2021-05-17 17:53:52 发布

阅读量403

点赞数

文章标签：回到顶部定时器 JavaScript scrollTop

本文链接：https://blog.csdn.net/wy5819/article/details/53454682

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js初学者腾讯视频回到顶部事件模拟即详解(参考）</title>
    <style type="text/css">
        * {
            padding:0;
            margin:0;

        }
        body,html{
            background: orange;
            width:100%;
            height: 500%;

        }
        a{
            text-decoration: none;
            color: white;
        }
        #golink{
            width: 80px;
            height: 80px;
            line-height: 80px;
            position: fixed;
            right: 20px;
            bottom: 200px;
            border-radius: 50%;
            opacity: 0.3;
            filter: alpha(opacity=30);
            background-color: black;
            text-align: center;
        }
        #golink:hover{
            opacity: 1;
            filter: alpha(opacity=100);
        }



    </style>
</head>
<body>
<a id="golink" href="javaScript:">回到顶部</a>
<script type="text/javascript">
    //绑定一个事件，当滚动条动到一定位置时按钮显示，回到顶部时按钮掩藏
    window.onscroll=Comepete;
        function Comepete() {
            var curTop=document.documentElement.scrollTop||document.body.scrollTop;
            var curHeight=document.documentElement.clientHeight||document.body.clientHeight;

            curTop>=curHeight?Golink.style.display="block":Golink.style.display="none";

        }


    var Golink=document.getElementById("golink");//获取元素

    //绑定点击事件
    Golink.onclick=function () {
        //设置在点击的时候，回到顶部的按钮掩藏。
        this.style.display="none";
        //把当滚动条动的时候，拉到一定的位置后，回到顶部按钮掩藏设置为null，这里若不设置，点击的时候按钮消失，但是当滚动条动的时候，便触发 window.onscroll=Comepete时间，按钮便再次出现。
        window.onscroll=null;


        //求步长，需要在onclick事件出发时候执行。
        var deration=1000;//定义回到顶部的总时间为100ms
            var interval=20;//每隔20ms走一次
        var target=document.documentElement.scrollTop||document.body.scrollTop;//滚动条所需要走的距离。
        var step=(target/deration)*interval;//求出每一步所走的距离；

        var timer=window.setInterval(function () {//设置一个定时器，让滚动条慢慢的回到顶部

            var curTop=document.documentElement.scrollTop||document.body.scrollTop;//定义病得到当前滚动条所在位置的高度

            if (curTop===0){//当滚动条回到顶部时，清除定时器并结束。
                window.clearInterval(timer);
                //在点击事件出发的时候，已经吧window.onscroll设为null，事件结束后，也就是滚动条回到顶部时候，需要再次绑定                window.onscroll=Comepete，否则你再次往下拉的时候，滚动条不会再出现。

                window.onscroll=Comepete;
                return;

            }else {
                curTop-=step;//每走一步就减去它所走的步长（所走距离）
                document.documentElement.scrollTop=curTop;
                document.body.scrollTop=curTop;
            }



        },interval);

    }



</script>




</body>
</html>