平滑滚动到顶部实现-优快云博客

本文链接：https://blog.youkuaiyun.com/xuehangongzi/article/details/80463229

你需要知道两个知识点

1滚动条距上面的距离
2滚动条移动到指定位置的函数

在标准浏览器下

var iScrollTop = document.documentElement.scrollTop;

在IE浏览器中，这样写

document.body.scrollTop

那用哪个呢，得先判断下当前浏览器支不支持

 if(document.documentElement.scrollTop){
       iScrollTop = document.documentElement.scrollTop;
     }else{
        iScrollTop = document.body.scrollTop;
   }

用一句代码表示

        var iScrollTop = document.documentElement.scrollTop||document.body.scrollTop;//这一句能代替if else判断语句

因为是回到顶部嘛，所以肯定是纵向滚动条慢慢上去啦，也就是，滚动条距上面的距离越来越少，可以用减法或乘法做匀速运动

返回顶部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>肖战快到碗里来</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    body{
    height: 2000px;
    }
    #go-top{
        width: 35px;
        height: 74px;/*行级元素不能设置宽高，要定位*/
        background: url("go-top.jpg") -100px 0 no-repeat;
        position: fixed;/*固定定位，相对于浏览器，不管滚动条如何变化，他始终在右下角*/
        bottom: 50px;
        right: 50px;
    }
        #go-top:hover{
            background: url("go-top.jpg") -300px 0 no-repeat;
        }

    </style>
</head>
<body>
<h1>肖战我爱你</h1>
<a href="javascript:;"   id="go-top"></a><!--javascript :;  是伪协议，这样做的目的是让a被点击后，不会因为#而-->
                                                            <!--刷新页面，回到页面顶部-->
                                               <!--#: href="#" 的话，点击a,页面会刷新来到顶部-->
<script>
    var oBtn = document.getElementById("go-top");
    oBtn.onclick = function(){
       // window.scrollTo(0,300);
        // 写300的话，它就会直接跳到300那里，没有动画效果，要想慢点挪过去，就要用定时器做
        //当点击按钮的时候，就先获取当时滚动条距离上面的距离，然后再用定时器一点点减少距离
        var iScrollTop = document.documentElement.scrollTop||document.body.scrollTop; 
        var timer = setInterval(function(){
            window.scrollTo(0,iScrollTop*=0.6);//window可以不写

            if(iScrollTop<=1){
                clearInterval(timer);
            }
        },100);

    }
 }
</script>

</body>
</html>