如何实现点击header头部导航元素跳转至网站对应区块？

方法1：原生HTML锚点实现（零额外代码） #

这是最简单的实现方式，完全依赖浏览器原生特性，不需要写JS：

• 给需要跳转的目标内容区块设置唯一id属性，比如How对应的内容区块写法如下：

  <div id="how-block">
    <!-- How区块的所有内容 -->
  </div>
  

• 给顶部导航栏对应的How元素的超链接属性设置为#+目标区块的id：

  <nav>
    <!-- 其他导航项 -->
    <a href="#how-block">How</a>
  </nav>
  

配置完成后点击导航的How选项就会直接跳转到对应区块位置，默认是瞬间跳转。

方法2：添加平滑滚动优化体验 #

如果想要更柔和的滚动过渡效果，可以按需选择以下实现方式：

纯CSS实现 #

只需要给全局添加一行样式即可，所有锚点跳转都会自动变为平滑滚动：

html {
  scroll-behavior: smooth;
}

JS自定义实现 #

如果你的顶部导航是固定定位，需要避免跳转后内容被导航遮挡，或者需要添加跳转后的高亮等额外逻辑，可以用JS实现：

// 绑定所有导航链接的点击事件
document.querySelectorAll('header nav a').forEach(navItem => {
  navItem.addEventListener('click', e => {
    // 阻止默认的瞬间跳转
    e.preventDefault()
    const targetId = navItem.getAttribute('href')
    const targetBlock = document.querySelector(targetId)
    // 80是顶部导航的高度，可根据你的实际导航高度调整
    const targetOffset = targetBlock.offsetTop - 80
    window.scrollTo({
      top: targetOffset,
      behavior: 'smooth'
    })
  })
})

常见注意事项 #

• 目标区块的id必须全局唯一，且和导航链接href中#后的内容完全匹配，区分大小写
• 固定定位的导航一定要设置偏移量，否则跳转后内容顶部会被导航遮盖

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