完全由 js 实现回到顶部按钮

实现思路

通过 JavaScript 实现一个回到顶部按钮，该按钮能够监听页面滚动事件，并在页面滚动到一定程度时显示出来。当用户点击按钮时，页面将滚动到顶部位置。

实现思路

要完全由 JavaScript 实现回到顶部按钮，主要的思路和基础流程：

创建回到顶部按钮元素：使用 JavaScript 的document.createElement()方法创建一个按钮元素，并设置它的文本内容、样式和位置等属性。
将按钮添加到页面中：使用document.body.appendChild()将按钮元素添加到页面的适当位置，使其可见。
监听页面滚动事件：使用 JavaScript 的window.addEventListener()方法，监听页面的滚动事件。
检测滚动位置：在滚动事件的回调函数中，使用window.pageYOffset（兼容性写法为window.pageYOffset || document.documentElement.scrollTop) 来检测页面当前的垂直滚动偏移量。
根据滚动位置判断按钮显示与隐藏：比较当前滚动偏移量是否超过了一个设定的阈值，例如 500 像素。根据比较结果，调用按钮元素的 style.display 属性来显示/隐藏按钮。
平滑滚动到页面顶部：给按钮绑定一个点击事件处理程序，在点击事件处理函数中，使用window.scrollTo()方法或其他平滑滚动方法将页面平滑滚动回顶部位置。

代码实现

以下是一个简单的示例代码，演示了如何使用上述思路和基础流程实现回到顶部按钮：

html

<script>
  // 创建回到顶部按钮
  var btn = document.createElement("button");
  btn.textContent = "回到顶部";
  btn.setAttribute("id", "myBtn");
  btn.setAttribute("title", "回到顶部");
  btn.style.position = "fixed";
  btn.style.bottom = "20px";
  btn.style.right = "20px";
  btn.style.display = "none";

  // 添加按钮到文档中
  document.body.appendChild(btn);

  // 监听页面滚动事件
  window.addEventListener("scroll", function () {
    scrollFunction();
  });

  function scrollFunction() {
    // 当页面滚动大于500个像素时，显示回到顶部按钮
    if (
      document.body.scrollTop > 500 ||
      document.documentElement.scrollTop > 500
    ) {
      btn.style.display = "block";
    } else {
      btn.style.display = "none";
    }
  }

  function topFunction() {
    // 平滑滚动回到页面顶部
    window.scroll({
      top: 0,
      left: 0,
      behavior: "smooth",
    });
  }

  // 按钮点击事件绑定
  btn.addEventListener("click", topFunction);
</script>

这段代码会动态创建一个回到顶部的按钮，并将其添加到文档中。通过监听页面滚动事件，当滚动超过 500 个像素时，显示该按钮；否则，隐藏按钮。当点击按钮时，页面会平滑地滚动回到顶部。

将以上代码复制到 Markdown 文件的<script>标签中或者放置在单独的 JavaScript 文件中并引入即可使用。

请注意，尽管没有使用任何特定的 JavaScript 库，这个简单的代码应该能够满足大部分基本的回到顶部需求。但是，如果你需要更复杂的功能或者更高级的定制选项，使用已有的 JavaScript 库可能会更加方便和灵活。

完全由 js 实现回到顶部按钮 ​

实现思路 ​

代码实现 ​

完全由 js 实现回到顶部按钮

实现思路

代码实现