自定义滚动容器添加返回顶部按钮方法

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《自定义滚动容器如何添加返回顶部按钮》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

本教程旨在解决“回到顶部”按钮在特定网页布局中不显示的问题，特别是当body元素设置了overflow: hidden而实际滚动发生在自定义容器内时。文章将详细阐述如何正确识别负责滚动的元素，监听其滚动事件，并基于其滚动位置控制按钮的显示与隐藏，同时提供平滑滚动至顶部的实现方法，确保按钮功能在复杂布局下依然稳定可靠。

理解滚动上下文：为什么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. 元素选择器：

   • 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属性。

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

今天关于《自定义滚动容器添加返回顶部按钮方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！