HTML点击文字跳转到指定位置方法

实际开发中常遇到“点下去，目标元素被导航栏遮住”或“滚过头”，根本原因是目标元素上方有固定定位的 header 或设置了 padding-top。浏览器滚动时只认元素的文档流位置，不考虑视觉偏移。

• 如果顶部有 position: fixed 的导航栏（高度 60px），可在目标元素上加 margin-top: -60px + padding-top: 60px 补偿（负 margin 拉高锚点位置，padding 确保内容不被遮挡）
• 更现代的做法是用 scroll-margin-top CSS 属性：h2[id] { scroll-margin-top: 60px; }，兼容性较好（Chrome 69+、Firefox 68+、Safari 15.4+）
• 避免对 html 或 body 设置 overflow: hidden，这会阻止锚点滚动生效

想让滚动变平滑？加一行 scroll-behavior: smooth

默认跳转是瞬时滚动，体验生硬。只需在 html 元素上加一个 CSS 声明，整站所有锚点跳转都会变平滑。

html {
  scroll-behavior: smooth;
}

注意：这个属性只作用于通过 # 链接或 Element.scrollIntoView({ behavior: 'smooth' }) 触发的滚动，不影响 JS 手动调用 window.scrollTo()（除非你显式传参）。

• 不支持 IE，但现代项目基本可放心用
• 若需兼容旧浏览器，可用 scrollIntoView() + behavior: 'smooth' 手动绑定点击事件，但没必要为简单锚点大动干戈
• 慎用在长页面中频繁跳转的场景——连续快速点击多个锚点，可能因动画队列导致卡顿

JavaScript 动态控制跳转时，别漏掉 preventDefault()

当需要拦截默认跳转行为（比如先做权限判断、再跳转），用 JS 绑定 click 事件时，必须调用 event.preventDefault()，否则浏览器会先执行原生跳转，再运行你的逻辑，造成冲突。

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault(); // ← 这行不能少
    const targetId = e.target.getAttribute('href').slice(1);
    const el = document.getElementById(targetId);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  });
});

容易忽略的点：如果 href 是空字符串（href="#"）或无效 ID，getElementById 返回 null，直接调用 scrollIntoView 会报错，建议加存在性判断。

本篇关于《HTML点击文字跳转到指定位置方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！