回到顶部动画效果

通过js让回到顶部的效果产生动画效果。

最终效果： 回到顶部动画效果

html结构如下：

<style>
    .top{
        width: 100%;
        height: 100px;
        background-color: orange;
    }
    .nav{
        width: 100%;
        height: 200px;
        background-color: #0f0;
    }
    .container{
        width: 100%;
        height: 600px;
        background-color: #f00;
    }
    .flink{
        width: 100%;
        height: 300px;
        background-color: #00f;
    }
    .foot{
        width: 100%;
        height: 100px;
        background-color: #ccc;
    }
    .totop{
        width: 50px;
        height: 50px;
        background-color: #fff;
        position:fixed;
        text-align: center;
        line-height: 50px;
        right:50px;
        bottom:100px;
        color:#f00;
        font-weight: bold;
        font-size: 20px;
        display:none;
    }
    .totop:hover{
        cursor: pointer;
    }
</style>
<div class="top"></div>
<div class="nav"></div>
<div class="container"></div>
<div class="flink"></div>
<div class="foot"></div>
<div class="totop">TOP</div>

js代码如下：

// 获取回到顶部的按钮
var totop = document.querySelector('.totop')
// 监听滚动行为 - 滚动事件
window.onscroll = function(){
    // 获取滚动过的距离
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    // 判断如果滚动过的距离超过400
    if(t>=400){
        // 让回到顶部的按钮显示
        totop.style.display = 'block';
    }else{
        // 如果小于400就让他隐藏
        totop.style.display = 'none';
    }
}
// 添加点击事件
totop.onclick = function(){
    // 获取到当前滚动过的距离
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    // 通过定时器慢慢回到顶部
    var timerId = setInterval(function(){
        // 让上面获取到的滚动过的距离减小
        t -= 10;
        // 将减小后的数字设置给滚动过的距离
        document.documentElement.scrollTop = document.body.scrollTop = t;
        // 如果减小到0就让定时器停止
        if(t<=0){
            clearInterval(timerId)
        }
    })
}