JS原生之回到顶部。

向右看齐 2022-05-14 03:25 211阅读 0赞

> 欢迎评论，指出不足，表达建议~

<!DOCTYPE html>
    <html lang="zh">
    <head>
            <meta charset="UTF-8" />
            <title>Document</title>
            <style type="text/css">
                    *{
                            margin: 0;
                            padding: 0;
                            font-family: "微软雅黑";
                            font-size: 14px;
                            -webkit-user-select: none;/*去除字体选中*/
                    }
                    html,body{
                            width: 100%;
                            height: 200%;
                            background: #CCCCCC;
                            background:-webkit-linear-gradient(top,#ccc,red,yellow,blue);
                            background:linear-gradient(top,#ccc,red,yellow,blue);/*背景过渡效果和兼容*/
                            
                    }
                    a{
                            text-decoration: none;
                            color: #000000;
                            
                    }
                    a:hover,a:active,a:target,a:visited{
                            text-decoration: none;
                            color: #000000;
                            
                    }
                    
                    #btn{
                            display: none;
                            position: fixed;
                            right: 10px;
                            bottom: 10px;
                            width: 100px;
                            height: 100px;
                            line-height: 100px;
                            text-align: center;
                            background: -webkit-linear-gradient(top,#000,red,yellow,blue);
                            border-radius:50% ;
                            opacity:0.5;
                            filter:alpha(opacity=50);
                    }
                    #btn:hover{
                            opacity:1;
                            filter:alpha(opacity=100);/*透明度兼容*/
                    }
            </style>
    </head>
    <body>
            <a href="javascript:;" id="btn">回到顶部</a>
    </body>
    <script type="text/javascript">
            
    //  简单回到顶部，没有过渡延迟。  
    //window.onscroll=function(){
    //      var cw=document.documentElement.scrollTop||document.body.scrollTop;
    //      if(cw>300){
    //              btn.style.display="block";
    //      }else{
    //              btn.style.display="none";
    //      }
    //}
    //btn.onclick=function(){
    //      document.documentElement.scrollTop = document.body.scrollTop=0;
    //}
    var obtn=document.getElementById("btn");
    window.onscroll=computedDisplay;
       function computedDisplay(){
            var cw=document.documentElement.scrollTop||document.body.scrollTop;
        if(cw>300){
                    obtn.style.display="block";
            }else{
                    obtn.style.display="none";//到一定距离才显示。
            }
    }
    //回到顶部进阶
    //总时间，500ms。
    //频率，10ms一步。
    //总距离,当前到top(0)
    //步长,每一次距离.总距离/总时间*频率.
    obtn.onclick=function(){
                this.style.display="none"
                window.onscroll=null;
                //让按钮隐藏,消除到一定距离显示按钮事件。
            var  duration=500,interval=10;//总时间和频率
            var target=document.documentElement.scrollTop||document.body.scrollTop;//滑动总距离
            var step=(target/duration)*interval;//每次走的距离
             
            var timer=window.setInterval(function(){
                    var curTop=document.documentElement.scrollTop||document.body.scrollTop;
                    
                    if(curTop===0){
                            window.clearInterval(timer);
                            window.onscroll=computedDisplay;//回到顶部的时候要开启事件。
                            return;
                    }
                       curTop-=step;
                       document.documentElement.scrollTop=document.body.scrollTop=curTop;
             },interval)
    }
    </script>
    </html>

> 你的意中人踏过无数bug来接你~