如何在页面滚动300px后显示锚点链接？（Bootstrap5环境）

以下是针对你代码问题的排查点和修复方案：

1. 修复DOM加载顺序问题 #

如果JS代码写在<head>标签内或目标DOM元素之前，document.getElementById("customID")会获取到null，导致后续操作完全失效。解决方法：

• 将JS代码放在</body>标签之前，或者用DOM加载完成事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  // 原JS代码全部放在此处
});

2. 修正节流函数调用方式 #

你当前调用节流函数的写法throttle(() => scrollHandler())会导致节流逻辑无法正确绑定原函数的上下文与参数，应直接传入scrollHandler函数：

window.addEventListener("scroll", throttle(scrollHandler));

3. 解决Bootstrap类冲突与CSS优先级问题 #

Bootstrap5中没有hide内置类，你自定义的.hide/.show类优先级可能不足，容易和Bootstrap工具类冲突。推荐两种处理方式：

方式一：复用Bootstrap内置工具类 #

<!-- 用Bootstrap的d-none替代自定义hide类 -->
<a href="#header-title-1" id="customID" class="bottom-0 end-0 quick-anchor-top d-none">
  <i class="fa-solid fa-arrow-up"></i>
</a>

// JS中直接切换d-none类
const scrollHandler = function() {
  const { scrollY } = window;
  if (scrollY >= 300) {
    myID.classList.remove('d-none');
  } else {
    myID.classList.add('d-none');
  }
};

方式二：提升自定义类优先级 #

/* 用!important强制覆盖基础样式，避免优先级不足 */
.quick-anchor-top.show {
    display: block !important;
}

.quick-anchor-top.hide {
    display: none !important;
}

4. 调整z-index避免遮挡 #

Bootstrap部分组件（如导航栏）默认z-index值较高，可能会遮挡你的锚点按钮，建议提高z-index：

.quick-anchor-top {
    /* 保留原有样式 */
    z-index: 9999; /* 确保高于Bootstrap默认组件层级 */
}

完整修复后的代码示例 #

HTML #

<a href="#header-title-1" id="customID" class="bottom-0 end-0 quick-anchor-top d-none">
  <i class="fa-solid fa-arrow-up"></i>
</a>

CSS #

.quick-anchor-top {
    font-size: 25px;
    padding: 15px 25px;
    border-radius: 50px;
    color: #000;
    background-color: rgba(182, 20, 20, 0.8);
    transition: all 0.4s ease;
    margin: 20px;
    position: fixed;
    z-index: 9999;
}

.quick-anchor-top:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const myID = document.getElementById("customID");

  function throttle(func, duration = 250) {
    let shouldWait = false;
    return function (...args) {
      if (!shouldWait) {
        func.apply(this, args);
        shouldWait = true;
        setTimeout(() => {
          shouldWait = false;
        }, duration);
      }
    }
  }

  const scrollHandler = function() {
    const { scrollY } = window;
    if (scrollY >= 300) {
      myID.classList.remove('d-none');
    } else {
      myID.classList.add('d-none');
    }
  };

  window.addEventListener("scroll", throttle(scrollHandler));
});

内容的提问来源于stack exchange，提问作者ShadowX2105