JavaScript/HTML中菜单点击滚动到区块被固定头部遮挡定位不准问题

1. 固定导航脱离正常文档流，scrollIntoView方法默认将元素顶部对齐视口顶部，导致目标区块的顶部内容被导航遮挡
2. 最后一个区块下方无足够的页面剩余高度，滚动到页面底部时无法将区块顶部推到导航下方的可视区域

方案1：纯CSS实现（推荐，无需修改现有JS代码，兼容性覆盖所有现代浏览器） #

首先全局定义导航高度的CSS变量，后续所有和导航高度相关的计算都复用这个变量：

:root {
  --nav-height: 60px; /* 替换为你的导航实际高度，响应式场景可在媒体查询中修改该变量值 */
}

解决遮挡问题 #

给所有锚点指向的目标区块添加scroll-margin-top属性，抵消固定导航的高度：

/* 替换下方的.section为你实际的区块类名 */
.section {
  scroll-margin-top: var(--nav-height);
}

解决最后一个区块无法滚动到位的问题 #

给页面底部添加足够的留白，保证滚动到底部时有足够空间显示最后一个区块的完整内容：

body {
  padding-bottom: calc(100vh - var(--nav-height));
  box-sizing: border-box;
}

方案2：JS修改滚动逻辑（适合需要兼容旧版浏览器的场景） #

修改你现有的点击跳转逻辑，手动计算滚动位置，减去导航高度的偏移量：

document.addEventListener("click", function (event) {
  if (!event.target.matches(".navigation__list--link")) return;

  event.preventDefault();
  const id = event.target.getAttribute("href").replace("#", "");
  const element = document.getElementById(id);
  const navHeight = document.querySelector("#header").offsetHeight;
  // 计算实际需要滚动到的位置
  const targetPosition = element.offsetTop - navHeight;

  window.scrollTo({
    top: targetPosition,
    behavior: "smooth"
  });
});

该方案仍需要配合方案1中给页面加底部padding的操作，解决最后一个区块的滚动问题。

如果你的导航是响应式高度，或者页面内容会动态变化，可以添加窗口大小变化监听，实时更新导航参数：

const nav = document.querySelector("#header");
let topOfNav = nav.offsetTop;
let navHeight = nav.offsetHeight;

// 重新计算导航相关参数
function calcNavParams() {
  topOfNav = nav.offsetTop;
  navHeight = nav.offsetHeight;
  // 同步更新CSS变量，保证CSS侧始终拿到最新的导航高度
  document.documentElement.style.setProperty('--nav-height', `${navHeight}px`);
  // 如果导航当前是固定状态，同步更新body的padding-top
  if(document.body.classList.contains('nav-is-stuck')) {
    document.body.style.paddingTop = `${navHeight}px`;
  }
}

window.addEventListener('resize', calcNavParams);

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