滚动获取距离

<!DOCTYPE html>
  <html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        .header{
            width:100%;
            height: 200px;
            background-color: #000;
        }
        .nav{
            width:100%;
            height: 300px;
            background-color: #f5f5f5;
        }
        .conter{
            width:100%;
            height: 1800px;
            background-color: pink;
        }
        .footer{
            width:100%;
            height:200px;
            background-color:#ccc;
        }
        #toTop{
            position: fixed;
            bottom: 100px;
            right: 50px;
            width: 50px;
            height: 30px;
            text-align: center;
            background-color: #fff;
            display: none;
        }

    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="nav">nav</div>
    <div class="conter">内容</div>
    <div class="footer">页脚</div>
    <div id="toTop" onclick="goTop()">top</div>
</body>
<script type="text/javascript">
    window.onscroll=function(){
        var st=document.documentElement.scrollTop;
        var wh=window.innerHeight;
        // console.log(st,wh);
        if(st>wh){
            toTop.style.display="block";
        }
        else{
            toTop.style.display="none";
        }
    }
    function goTop(){
        var st =document.documentElement.scrollTop;
        var id=setInterval(function(){
            var now= document.documentElement.scrollTop;
            document.documentElement.scrollTop=now-(st/10);
            console.log("now:",now,"st/10:",st/10,"st:",st)
            if(now-(st/10)<=0){
                clearInterval(id);
            }
        },100)
    }
    
</script>
</html>
最后编辑于：2021.02.19 10:33:38
滚动获取距离

推荐阅读更多精彩内容
