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;等）。

已编辑

：

为了使屏幕实际平滑滚动，您需要在CSS样式表的body标签中添加scroll-behavior: smooth;属性。

我在每个工作表上都有这个样板。

*{
  scroll-behavior: smooth;
}

如何使按钮将窗口滚动到一定高度

1 个答案: