技術標籤：前端htmlcssjs

題目：

網頁緩慢置頂回到頂部（ 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的底部

總結

這樣就可以實現了，我們點選，就可以先快後慢回到頂部了。