如何使用JavaScript滚动到带顶部内边距的指定元素？

问题原因 #

你的代码中，#content 嵌套在设置了 overflow: auto 的 #myDIV 容器内，实际滚动容器是 #myDIV，而非全局窗口。之前调用 window.scrollBy 只会操作整个页面的滚动，对容器内部的滚动毫无作用，所以达不到预期效果。

可行解决方案 #

方案1：手动计算滚动位置（无需修改CSS） #

直接操作滚动容器的滚动位置，精准计算元素偏移量并减去需要的内边距：

function myFunction() {
  const container = document.getElementById("myDIV");
  const element = document.getElementById("content");
  // 获取元素相对于容器顶部的偏移距离
  const elementOffsetTop = element.offsetTop;
  // 设置容器滚动到元素顶部上方200px的位置，可选平滑滚动
  container.scrollTo({
    top: elementOffsetTop - 200,
    behavior: 'smooth'
  });
}

方案2：结合容器内边距（需修改CSS） #

如果允许调整样式，可以给滚动容器添加顶部内边距，再用 scrollIntoView 实现：

修改CSS：

#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
  background: coral;
  padding-top: 200px; /* 添加顶部内边距 */
  box-sizing: border-box; /* 确保内边距不增加容器总高度 */
}

#content {
  margin: 500px;
  height: 800px;
  width: 2000px;
  background-color: coral;
  margin-top: 0; /* 移除元素顶部margin，避免额外间距 */
}

简化后的JavaScript：

function myFunction() {
  const element = document.getElementById("content");
  element.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
}

注意：如果你的需求是让元素距离整个页面视口顶部200px，那需要移除#myDIV的overflow: auto样式，此时滚动容器变为全局窗口，方案1中把container换成window即可。

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