如何让scrollIntoView滚动后，目标元素上方保留20px边距？

当然可以实现！这里有两种实用的方案，你可以根据自己的场景来选择：

方案一：结合scrollIntoView与scrollBy调整位置 #

这个方案基于你现有的代码，只需要在滚动完成后额外向上调整20px：

const moveToBlue = () => { 
  const blue = document.getElementById('blue');
  // 先将目标元素滚动到视口起始位置
  blue.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start'});
  // 延迟执行滚动调整，确保scrollIntoView的平滑动画完成
  setTimeout(() => {
    // 向上滚动20px，保持平滑动画
    window.scrollBy({ top: -20, behavior: 'smooth' });
  }, 100);
};

小提示：添加100ms的延迟是为了等待scrollIntoView的平滑动画结束，避免调整操作被覆盖。如果你的场景不需要平滑动画，可以去掉behavior: 'smooth'，同时也不需要延迟。

方案二：直接计算目标位置，手动控制滚动 #

这个方法更精准，不需要依赖延迟，直接计算出目标位置后滚动：

const moveToBlue = () => { 
  const blue = document.getElementById('blue');
  // 获取元素相对于文档顶部的绝对位置
  const elementAbsoluteTop = blue.getBoundingClientRect().top + window.pageYOffset;
  // 减去20px，得到最终需要滚动到的位置
  const targetPosition = elementAbsoluteTop - 20;
  // 执行平滑滚动到目标位置
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });
};

优势：这种方式不需要等待scrollIntoView的执行时机，直接计算位置，在复杂布局（比如有固定导航栏）的场景下更稳定，你还可以根据需求轻松调整预留空间的大小。

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