网页缓慢置顶回到顶部 html、css、js

题目：

网页缓慢置顶回到顶部（ html、css、js）。。。鼠标点击回到顶部的盒子后，网页可先快后缓慢最终回到最初顶部。使用js的定时器实现。

问题描述：

鼠标点击回到顶部的盒子后，网页可先快后缓慢最终回到最初顶部。

解决：

1.先写一个div盒子，如可以把它固定定位到网页右下角，这样我们点击它时网页就可以回到顶部。当然，也可以把它放到任何的位置都是可以的。也可以用其它标签，只要定义的id是一样的就可以了。

盒子：

<div class="zd" id="ding">
    置顶
  </div>

样式：把其定位到网页右下角，也可以放在其它位置。

 .zd {
      position: fixed;
      bottom: 50px;
      right: 10px;
      background-color: rgb(155, 143, 143);

    }
    

效果：可以写好点样式更美观。我们要实现鼠标点击这个置顶后就可以先快后慢回到顶部。

*比如我们这样设计就美观许多：

2. js代码，实现功能

 <script>
    var ding = document.getElementById('ding');
    ding.addEventListener('click', function () {
     
     
      var timer = setInterval(function () {
     
     
        var left = window.pageYOffset;
        var step = Math.ceil((left - 0) / 10);
        window.scroll(0, left - step);
        if (left == 0) {
     
     
          clearInterval(timer);
        }
      }, 30)
    })
  </script>

注意：script标签可以写在body的底部

总结

这样就可以实现了，我们点击，就可以先快后慢回到顶部了。