导航元素跳转页面ID位置偏移，请求修正定位问题

这个问题太常见了——十有八九是因为你的顶部导航栏用了position: fixed或者sticky固定在页面顶部，当浏览器跳转到锚点时，默认会把目标元素的顶部对齐到视口顶部，但导航栏占了顶部的空间，直接把目标标题给挡住了，看起来就像是“越过”了位置。

我看了你的示例站点，确实是顶部导航固定导致的，给你几个简单有效的解决方案：

方法1：用CSS scroll-padding-top（最简单的现代方案） #

这是浏览器原生支持的解决方案，只需要给根元素设置一个顶部内边距，值等于你的导航栏高度。

打开你的CSS文件，找到html选择器，添加一行：

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  scroll-padding-top: 70px; /* 这里的数值等于你的导航栏高度，你的导航大概是69px，设70px刚好 */
}

优点：代码最少，不需要修改HTML结构，完全由CSS处理，还支持平滑滚动（如果开启的话）。
缺点：需要浏览器支持scroll-padding-top，现代浏览器（Chrome、Firefox、Edge等）都没问题，IE不支持，但现在IE基本没人用了。

方法2：给锚点元素添加补偿边距（兼容性最好的方案） #

如果需要兼容老浏览器，可以给每个带ID的目标元素添加相对定位，用padding和负margin来预留空间，同时不影响页面布局。

比如你的页面里的<div id="mission">、<div id="featured-tea">这些目标元素，给它们加CSS：

#mission, #featured-tea, #locations {
  position: relative;
  padding-top: 70px; /* 等于导航栏高度 */
  margin-top: -70px; /* 抵消padding的高度，避免额外增加页面间距 */
}

优点：兼容性拉满，所有浏览器都支持。
缺点：需要给每个锚点元素都设置样式，如果锚点多的话有点繁琐。

方法3：用JavaScript手动控制滚动位置（最灵活的方案） #

如果想要更定制化的效果（比如平滑滚动），可以用JS来拦截导航点击事件，手动计算滚动位置。

在你的JS文件里添加这段代码：

// 选中所有导航栏的链接
document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止默认的锚点跳转行为
    e.preventDefault();
    // 获取目标ID
    const targetId = this.getAttribute('href');
    // 找到目标元素
    const targetElement = document.querySelector(targetId);
    // 获取导航栏的高度
    const navHeight = document.querySelector('header').offsetHeight;
    // 计算目标位置：目标元素的顶部距离 + 页面滚动距离 - 导航栏高度
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
    
    // 滚动到目标位置，可选添加平滑滚动
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
  });
});

优点：可以自定义滚动行为，比如添加平滑动画，还能处理一些复杂的布局情况。
缺点：需要写JS代码，比纯CSS方案复杂一点。

你可以先试试方法1，最简单快捷，应该就能解决你的问题了。

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