点击锚点链接时如何设置自定义滚动位置避开粘性导航栏？

方案一：JavaScript自定义滚动逻辑 #

给锚点链接绑定点击事件，手动计算滚动位置，避开导航栏的遮挡：

// 批量处理所有目标锚点链接
document.querySelectorAll('.table-of-content a').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 取消默认锚点跳转行为
    const targetId = this.getAttribute('href').slice(1); // 提取目标元素的id
    const target = document.getElementById(targetId);
    if (!target) return;

    // 导航栏高度，可根据实际情况调整，或动态获取
    const navbarHeight = 100;
    // 计算最终滚动位置：目标元素顶部偏移量减去导航栏高度
    const scrollPosition = target.offsetTop - navbarHeight;

    // 执行滚动，behavior设为smooth可开启平滑滚动
    window.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });
  });
});

如果导航栏高度会随窗口大小变化，把navbarHeight改成动态获取：

const navbarHeight = document.querySelector('.sticky-navbar').offsetHeight;

方案二：CSS全局设置滚动内边距 #

用scroll-padding-top给页面滚动容器设置顶部内边距，所有锚点滚动都会自动预留出导航栏的空间，无需JS处理单个链接：

html {
  scroll-padding-top: 100px; /* 值等于粘性导航栏的高度 */
  scroll-behavior: smooth; /* 可选，开启全局平滑滚动 */
}

如果导航栏高度是动态的，结合CSS变量和JS动态更新：

html {
  scroll-padding-top: var(--navbar-height, 100px);
}

const navbar = document.querySelector('.sticky-navbar');
// 更新导航栏高度变量
function setNavbarHeight() {
  document.documentElement.style.setProperty('--navbar-height', `${navbar.offsetHeight}px`);
}
// 初始化和窗口 resize 时更新
setNavbarHeight();
window.addEventListener('resize', setNavbarHeight);

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