点击同页面锚点或按钮后div内容被sticky定位头部遮挡如何解决

• 锚点跳转默认行为是将目标元素顶部对齐视口顶部，sticky定位的header占据了视口顶部固定高度，直接遮挡了目标元素的顶部内容
• JS切换区块显隐时未主动调整滚动位置，也会导致当前滚动位置下内容被header遮挡
• 额外问题：fixed定位的footer也会遮挡main区域的底部内容

1. CSS配置调整 #

给所有内容区块添加scroll-margin-top属性，专门适配固定头部的锚点偏移，同时给main添加底部内边距避免被footer遮挡：

/* 调整原有main样式 */
main {
  display: block;
  padding-top: 1rem;
  /* 新增：值根据footer实际高度调整 */
  padding-bottom: 80px;
}
/* 调整原有内容区块样式 */
#contentAbout, #contentPortfolio, #contentResume, #contentContact, #contentBlog {
  display: none;
  /* 新增：值根据header实际高度调整，可适当留冗余 */
  scroll-margin-top: 120px;
}

2. HTML调整 #

阻止about按钮的默认锚点跳转行为，避免和JS显隐逻辑冲突：

<!-- 给onclick新增event.preventDefault() -->
<a href="index.html#contentAbout" id="btnAbout" name="btnNav" value="about" onclick="event.preventDefault(); contentAbout();">about</a>

3. JS逻辑优化 #

首先移除所有函数内无效的if判断（document.getElementById("xxx").click是点击方法，不是布尔判断条件，完全无效），然后在每个区块切换完成后主动调用滚动方法，确保内容完整展示：
举contentAbout的修改示例，其余函数对应修改即可：

function contentAbout() {
  document.getElementById('contentHeading').innerHTML = "About";
  document.getElementById('contentAbout').style.display = "block";
  document.getElementById('contentPortfolio').style.display = "none";
  document.getElementById('contentResume').style.display = "none";
  document.getElementById('contentContact').style.display = "none";
  document.getElementById('contentBlog').style.display = "none";
  // 新增：主动滚动到目标区块，smooth是平滑滚动效果，不需要可以删掉behavior参数
  document.getElementById('contentAbout').scrollIntoView({behavior: 'smooth'});
}

内容的提问来源于stack exchange，提问作者Beginner-Guy