JS原生之回到顶部。

欢迎评论，指出不足，表达建议~
<!--
a 标签的a:hover兼容所有浏览器。默认跳转页面，没有值得话，刷新本页面。
  写#target：锚点定位。
   把href="javascript:;"可以消除默认刷新和锚点属性。
        -->
<!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来接你~
JS原生之回到顶部。

猜你喜欢
