单页网站如何实现点击按钮后滚动到同一页面的指定区块？

方案1：HTML原生锚点（无JS，最简单） #

这是最基础的实现方式，不需要写任何JavaScript代码：

• 给目标滚动区块添加id属性，例如要跳转到的「关于我们」区块写为：<div id="about">关于我们板块内容</div>
• 触发按钮直接用a标签，href属性填写#+目标区块的id，例如：<a href="#about">点击跳转到关于我们</a>

原生实现默认是瞬间跳转，如果需要平滑滚动效果，全局加一行CSS即可：

html {
  scroll-behavior: smooth;
}

方案2：JavaScript手动控制（灵活度更高） #

如果需要自定义滚动速度、设置滚动偏移（避免固定顶部导航栏挡住目标区块内容），可以用JS实现：

• 先给目标区块加id属性，例如id="contact"
• 给触发按钮绑定点击事件，调用scrollIntoView方法：

// 给触发按钮绑定点击事件
document.querySelector('#jump-to-contact-btn').addEventListener('click', function() {
  document.querySelector('#contact').scrollIntoView({
    behavior: 'smooth', // 平滑滚动，填auto就是原生瞬间跳转
    block: 'start' // 滚动后目标区块对齐视口顶部，填center就是对齐视口中间
  })
})

如果要加自定义偏移量，比如你的固定导航高度为80px，不想目标内容被导航遮挡，可以用scrollTo方法实现：

document.querySelector('#jump-to-contact-btn').addEventListener('click', function() {
  const targetEl = document.querySelector('#contact')
  const targetPosition = targetEl.offsetTop - 80 // 减去导航高度作为偏移量
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  })
})

常见问题处理 #

• 如果点击跳转后不希望URL末尾出现#xxx的锚点后缀，可以在JS点击事件里加event.preventDefault()阻止a标签的默认跳转行为
• scroll-behavior: smooth的浏览器兼容性已经覆盖95%以上的主流桌面/移动端浏览器，除非需要适配IE浏览器否则不需要额外做兼容处理

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