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

Question

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

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

而且我有一个具有该 ID 的 div，当触发事件时，我的窗口当然会移动到 div 位置，但是我在页面顶部有一个固定的标题，高度约为 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 添加到:target 选择器，如下所示：

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

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