平滑滚动以锚定滚动行为，但高于100px

Question

我正在尝试对页面上的锚点进行平滑滚动效果，但由于页眉发粘，我需要将其滚动100px以上。不想在那里使用JQuery。 我试图添加伪类来阻止锚，如下所示：

div:target:before {
  content: '';
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}

这不起作用，它在上面覆盖了块。 然后我尝试通过事件监听器滚动它：

window.addEventListener("hashchange", function () {
  window.scrollTo(window.scrollX, window.scrollY - 100);
});

它仅在没有滚动行为属性的情况下才能工作。 有什么解决办法吗？谢谢！

Answer 1

尝试更换

window.scrollTo(...)

使用

document.getElementById('yourElemId').scrollIntoView({behavior: "smooth", block: "end"});

yourElemId是具有锚点的元素的ID。

这是scrollIntoView

的文档