如何为自定义滚动容器实现“回到顶部”按钮

理解滚动上下文：为什么document.body.scrollTop或window.scrollY无效？

在网页开发中，实现“回到顶部”功能通常涉及监听页面的滚动事件，并根据滚动距离来控制一个按钮的显示与隐藏。常见的做法是检查document.body.scrollTop、document.documentElement.scrollTop或window.scrollY。然而，在某些复杂的布局中，例如当body元素被设置为overflow: hidden;时，这些属性将始终返回0，因为浏览器窗口或body元素本身并没有发生滚动。

在提供的代码示例中，CSS样式明确地将body的overflow属性设置为hidden：

body {
  /* ... */
  overflow: hidden; /* 这导致 body 元素本身不可滚动 */
  /* ... */
}

这意味着页面的主要滚动行为不再由body或html元素承担。相反，内容被包裹在一个具有overflow-y: auto;属性的自定义div元素中，即.wrapper：

.wrapper {
  height: 100vh;
  overflow-y: auto; /* 实际的垂直滚动发生在此元素上 */
  overflow-x: hidden;
  perspective: 10px;
}

因此，要正确检测滚动位置，我们需要将焦点从全局的window或document转移到实际发生滚动的.wrapper元素上。

识别并监听正确的滚动元素

为了使“回到顶部”按钮按预期工作，我们需要做两件事：

1. 获取对实际滚动容器（在这里是.wrapper）的引用。
2. 将滚动事件监听器附加到这个特定的容器上，而不是window。
3. 在判断按钮显示/隐藏的逻辑中，使用该容器的scrollTop属性。
4. 在点击按钮时，将该容器滚动到顶部。

以下是修改后的JavaScript代码，它将正确地识别.wrapper元素作为滚动源，并相应地调整逻辑：

$(document).ready(function () {
  // ... 现有其他初始化代码，如汉堡菜单、深浅模式切换等 ...

  // 获取“回到顶部”按钮和实际的滚动容器
  const scrollButton = document.getElementById("scroll-button");
  const wrapper = document.querySelector(".wrapper");

  // 确保按钮和滚动容器都存在
  if (scrollButton && wrapper) {
    // 为按钮添加点击事件监听器，使其平滑滚动到顶部
    scrollButton.addEventListener("click", topFunction);

    // 为实际的滚动容器添加滚动事件监听器
    wrapper.addEventListener("scroll", scrollFunction);

    /**
     * 根据滚动容器的滚动位置控制“回到顶部”按钮的显示与隐藏
     */
    function scrollFunction() {
      // 检查 wrapper 元素的垂直滚动距离
      // 当滚动距离超过20像素时显示按钮，否则隐藏
      if (wrapper.scrollTop > 20) {
        scrollButton.style.display = "block";
      } else {
        scrollButton.style.display = "none";
      }
    }

    /**
     * 将滚动容器平滑滚动到顶部
     */
    function topFunction() {
      // 使用 scrollTo 方法将 wrapper 元素滚动到顶部
      wrapper.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth", // 实现平滑滚动效果
      });
    }
  }
});

代码解析与注意事项

1. 元素选择器：

   

   通义视频

   通义万相AI视频生成工具

   70

   查看详情
   • document.getElementById("scroll-button")：获取“回到顶部”按钮元素。
   • document.querySelector(".wrapper")：获取作为实际滚动容器的.wrapper元素。使用querySelector可以方便地通过类名获取元素。

2. 事件监听器：

   • wrapper.addEventListener("scroll", scrollFunction);：关键在于将scroll事件监听器附加到wrapper元素上，而不是window或document。这确保了当.wrapper内部内容滚动时，scrollFunction会被触发。

3. 滚动位置判断：

   • if (wrapper.scrollTop > 20)：scrollTop属性现在直接从wrapper元素获取，它准确反映了该元素内容的垂直滚动距离。20是一个可配置的阈值，您可以根据需要调整。

4. 平滑滚动：

   • wrapper.scrollTo({ top: 0, left: 0, behavior: "smooth" });：scrollTo方法被调用在wrapper元素上，而不是window。behavior: "smooth"参数提供了平滑的滚动体验。

5. 变量作用域：

   • 将scrollButton和wrapper的获取以及相关的函数定义放入$(document).ready()回调中，有助于保持代码的模块化和作用域清晰，避免创建不必要的全局变量。

总结

当网页布局采用自定义滚动容器（如div元素设置overflow: auto）而非让body或html元素进行主滚动时，传统的window.scrollY或document.body.scrollTop方法将不再适用。解决此问题的关键在于：

• 识别正确的滚动上下文： 明确哪个HTML元素是实际的滚动容器。
• 监听特定元素的滚动事件： 将scroll事件监听器附加到该滚动容器上。
• 使用容器的scrollTop属性： 根据该容器的scrollTop值来判断滚动位置。
• 操作容器的滚动： 当需要滚动到顶部时，调用该容器的scrollTo或设置其scrollTop属性。

通过遵循这些原则，您可以确保“回到顶部”功能在各种复杂的网页布局中都能稳定可靠地运行。

以上就是如何为自定义滚动容器实现“回到顶部”按钮的详细内容，更多请关注php中文网其它相关文章！