如何滚动到<div>元素上方50px位置？

纯HTML+CSS方案（优先推荐） #

方法1：使用CSS scroll-margin-top 属性 #

这是现代浏览器支持的原生方案，无需额外JS，直接配合原生锚点即可实现偏移效果：

<a href="#google">滚动到目标区域</a>

<div id="google">目标内容</div>

html {
  scroll-behavior: smooth;
}

#google {
  /* 滚动后元素顶部距离视口顶部保留50px间距 */
  scroll-margin-top: 50px;
}

方法2：兼容老浏览器的隐藏锚点法 #

如果需要兼容不支持scroll-margin-top的旧浏览器，可以通过设置一个隐藏的锚点元素来实现偏移：

<a href="#google-anchor">滚动到目标区域</a>

<!-- 隐藏的锚点，定位在目标元素上方50px处 -->
<div id="google-anchor" style="position: absolute; top: -50px; visibility: hidden;"></div>
<!-- 目标元素需设置相对定位，确保锚点定位准确 -->
<div id="google" style="position: relative;">目标内容</div>

html {
  scroll-behavior: smooth;
}

JavaScript方案（灵活控制场景） #

如果需要更复杂的滚动逻辑，可通过JS手动计算滚动位置：

<a href="#google" id="scroll-trigger">滚动到目标区域</a>

<div id="google">目标内容</div>

html {
  scroll-behavior: smooth;
}

document.getElementById('scroll-trigger').addEventListener('click', function(e) {
  // 阻止默认锚点跳转行为
  e.preventDefault();
  // 获取目标元素
  const targetElement = document.getElementById('google');
  // 计算目标元素的顶部位置（相对于文档）
  const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
  // 滚动到目标位置上方50px处
  window.scrollTo({
    top: targetPosition - 50,
    behavior: 'smooth'
  });
});

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