如何在具有 id 的容器下方向下滚动一定数量的像素？

Question

当事件被触发时，我有这样的事情：

window.location.href = "#my-elm";

并且我有一个具有该 ID 的 div，当事件被触发时，我的 window 当然会转到 div 位置，但我有一个固定的 header在页面顶部，高度约为150px，所以我的div部分不可见..

我想做的是当我的事件被触发时我将向下滚动到锚点位置 + 150 px

我试图在我的页面上添加这个，我的理解是这将观看我的哈希散列（我的锚点改变了？？），这将额外滚动 150 像素，但没有奏效

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY + 150);
});

有什么想法吗？

如有任何帮助，我们将不胜感激。

编辑：

所提供的答案适用于 Firefox、Edge、Chrome、Opera、Safari +11

对于 Safari -11 这将不起作用，它只适用于最新版本，这很糟糕，你必须实施其他解决方案来修复 Safari BUG

Answer 1

只能用 CSS 完成。

像这样添加 scroll-margin-top to the :target 选择器：

:target {
 scroll-margin-top: 150px;
}

它会为每个锚元素从滚动容器的顶部边缘添加边距，如果出于某种原因你只想为 #my-elm 应用它，请将选择器从 :target 更改为#my-elm