如何使按鈕將窗口滾動到一定高度

Question

我試圖讓窗口在單擊按鈕時具有平滑的滾動效果。 目前，我將其作為以下代碼。

<div class="scroll-button" href="#thanks"><span></span>Scroll</div>

var scrollButton = document.querySelector('.scroll-button');
scrollButton.addEventListener("click", smoothScrollButton);

function smoothScrollButton() {
  var scrollTheWindowButton = document.querySelector('html, body');
  for (var i = 0; i <  scrollTheWindowButton.length; i++) {
    scrollTheWindowButton[i].animate([{scrollTop = this.offsetTop}], 500, 'linear' 
    )};
  }

我目前在VSC和控制台中看不到任何錯誤，因此，它使調試變得有些困難。 我試圖查看MDN上的.animate（）函數，但如果我正在取得進展，則請參閱idk。

請幫忙？

Answer 1

您可以在沒有JS的情況下實現此效果，只需在HTML文檔中您希望屏幕在單擊時滾動的部分的高度插入<a>標記即可。 您可以使用<a>標記的href屬性來指示該部分的ID。

HTML文件：

<body>
    <div id="section-foo"></div>
    ...
    <a href="#section-foo">Take me foo</a>
</body>

您可以在<a>標記周圍構建包裝器，然后在其中應用樣式，以便獲得漂亮的按鈕（ text-decoration: none, background-color: some-color, border-radius: 3px;等等）。

編輯：

為了使屏幕實際平滑滾動，您需要添加以下scroll-behavior: smooth; 屬性設置為CSS樣式表中的body標簽。

我在每個工作表上都有這個樣板。

*{
  scroll-behavior: smooth;
}

如何使按鈕將窗口滾動到一定高度

問題描述

1 個解決方案

解決方案1
1 2018-10-15 03:01:11

如何使按鈕將窗口滾動到一定高度

問題描述

1 個解決方案

解決方案1 1 2018-10-15 03:01:11

解決方案1
1 2018-10-15 03:01:11