如何在两次滚动事件后显示返回顶部按钮

你可以通过添加滚动次数统计逻辑来实现需求，核心是记录用户的有效滚动次数，当次数达到2次时显示按钮。以下是修改后的完整代码：

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<script>
    // 获取按钮元素
    let mybutton = document.getElementById("myBtn");
    // 滚动次数计数器
    let scrollCount = 0;
    // 记录上一次的滚动位置，用于判断有效滚动
    let prevScrollTop = 0;
    // 滚动触发的最小位移阈值（可根据需求调整）
    const scrollThreshold = 10;

    window.onscroll = function() {
      scrollFunction()
    };

    function scrollFunction() {
      // 获取当前滚动位置
      const currentScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      
      // 判断是否为有效向下滚动（位移超过阈值）
      if (currentScrollTop > prevScrollTop && (currentScrollTop - prevScrollTop) > scrollThreshold) {
        scrollCount++;
      }
      // 滚动回顶部时重置计数器并隐藏按钮
      else if (currentScrollTop === 0) {
        scrollCount = 0;
        mybutton.style.display = "none";
        prevScrollTop = 0;
        return;
      }

      // 更新上一次滚动位置
      prevScrollTop = currentScrollTop;

      // 当滚动次数达到2次时显示按钮
      if (scrollCount >= 2) {
        mybutton.style.display = "block";
      } else {
        mybutton.style.display = "none";
      }
    }

    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
</script>

关键改动说明： #

• 添加scrollCount变量统计有效滚动次数，初始值为0
• 新增prevScrollTop记录上一次滚动位置，用来判断用户是否进行了有效向下滚动
• 设置scrollThreshold作为滚动触发的最小位移阈值，避免页面微小抖动触发无效计数
• 滚动事件逻辑：
  • 仅当用户向下滚动且位移超过阈值时，才增加滚动计数
  • 滚动回页面顶部时，重置计数器并隐藏按钮
  • 计数达到2次及以上时，显示返回顶部按钮

内容的提问来源于stack exchange，提问作者Aimée Monty