返回顶部按钮 - JavaScript

在网站的某些页面或长文档中，我们可能会需要一个返回顶部的按钮，让用户快速地回到页面顶部。在本篇文章中，我们将学习如何用原生JavaScript创建一个简单的返回顶部按钮。

HTML结构

我们需要一个按钮，当点击它时，页面滚动回顶部。因此，我们需要将按钮添加到页面中。在这里，为了更好的可用性和可达性，我们建议将按钮放在页面的右下角。

<button id="back-to-top-btn">返回顶部</button>

在按钮上使用了一个 id 属性，用于在JavaScript代码中引用这个按钮。

CSS样式

为了让按钮更加好看而且更容易识别，我们建议使用一些基本的样式。

#back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}

#back-to-top-btn.show {
  display: block;
}

其中，我们使用了一个 fixed 的定位，将按钮固定在页面的右下角。我们还使用了 display: none 属性来隐藏按钮。当页面滚动到一定程度时，我们将通过JavaScript添加一个 show 类来显示按钮。

JavaScript

当用户单击返回顶部按钮时，我们需要将页面滚动回顶部。为此，我们将使用 window.scrollTo() 方法。

// 获取按钮元素
const backToTopBtn = document.querySelector("#back-to-top-btn");

// 当页面滚动时
window.onscroll = function() {
  // 如果滚动高度超过一定值，就显示返回顶部按钮
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    backToTopBtn.classList.add("show");
  } else {
    backToTopBtn.classList.remove("show");
  }
}

// 当用户点击按钮时
backToTopBtn.onclick = function() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

代码分为两部分。第一部分是滚动事件监听器，当页面滚动时，我们检查滚动高度是否超过一定值。如果是，则添加一个 show 类来显示返回顶部按钮；否则，我们将从按钮上删除 show 类来隐藏它。

第二部分是单击事件监听器。当用户单击按钮时，我们将将页面的 scrollTop 属性设置为 0，以便将页面滚动回顶部。

结语

现在我们有了一个非常基本的返回顶部按钮。您可以自行决定是否要调整按钮的样式或添加其他功能。然而，这个例子非常简短，你可以用它来构建更复杂和功能丰富的按钮。

我们希望这篇文章能够帮助您学习如何使用原生JavaScript创建具有实用性的功能。