js盒子模型案例之回到顶部_js回到盒子顶部-CSDN博客

本文链接：https://blog.csdn.net/qq_44419617/article/details/111084412

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #back{
            position: fixed;/*固定定位*/
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: yellowgreen;
            text-align: center;
            line-height: 100px;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="1.png" alt="">
        <img src="1.png" alt="">
        <img src="1.png" alt="">
        <img src="1.png" alt="">
        <img src="1.png" alt="">
        <div id="back">
            回到顶部
        </div>
    </div>
</body>
</html>
<script src="utils.js"></script>
<script>
    var back=document.getElementById("back");
    /* back.οnclick=function(){
        document.body.scrollTop=0;
        document.documentElement.scrollTop=0;
        // win('scrollTop',0);//点击一下直接回到顶部，没有动画过渡
    } */
    back.onclick=function(){
        //获取当前浏览器卷曲的高度 
        let winT=win('scrollTop');
        let part = winT/50;

        //把当前浏览器卷曲高度分成50份，定时器每隔20ms就执行一次（给浏览器的滚动条卷曲的高度减去 1/50）
        let timer=setInterval(()=>{
            winT-=part;
            win('scrollTop',winT);
            if(winT<=0){
                clearInterval(timer);
            }
        },20);
        //把运动的总距离分成50份，每一次运动50分之一，那50次就能够走完全程，每运动一次需要20ms，那走完全程就需要20*50=1000ms也就是1s
    };

    //监听当前浏览器滚动条的触发，一旦滚动，她绑定的函数就会执行
    window.onscroll=check;
    
    //当前浏览器可视区域的高度
    let winH=win('clientHeight');
    function check(){
        //当浏览器滚动条卷曲的高度大于等于一屏的高度时就让“回到顶部”显示
        let winT=win('scrollTop');
        if(winT>=winH){
            back.style.display='block';
        }else{
            back.style.display='none';
        }
    }
    
    //封装一个方法专门用来设置或者获取浏览器的某些属性
    function win(attr,value){
        if(value==undefined){
            return document.documentElement[attr] || document.body[attr];
        }
        document.documentElement[attr]=value;
        document.body[attr]=value;
    }
    win('scrollTop',100);//设置
    console.log(win('clientWidth'));//获取
</script>