向后/向前导航时，浏览器滚动到上一个位置而不是锚点
Browser scrolling to previous position instead of anchors when navigating back / forward
我正在用纯 HTML / CSS（无 JS）构建一个滑块。效果很好，参见 the code。
您需要下载并在本地执行才能理解我的问题，因为它与浏览器的后退和前进按钮有关。
单击链接进行导航时，URL 会更改为#a1、#a7、#a5，无论您在做什么。滑块正确滚动到适当的幻灯片。如果您手动更改 URL，例如将 #a3 替换为 #a7，滑块也将正确滚动。
但是，当您返回（或前进）时，URL 从#a3 变为#a7，但内容不会滚动。
知道为什么吗？知道我可以做些什么来让滚动在后面吗？
我问了一位 Firefox 开发人员，他向我解释了为什么这是预期的行为，而不是错误。
我误解了背部动作是怎么回事。快速回答：它不会转到之前选择的锚点，它会转到主体滚动所在的位置。
问题中仍然使用codepen中的代码：
- 从 CSS
中删除 overflow-x: scroll
- 点击#a3，然后点击#a7。内容滚动到#a7
- 单击浏览器的后退按钮
我以为浏览器正在滚动回#a3。但实际上，它正在滚动到您单击 link 之前的位置。要查看实际效果：
- 点击#a5。 URL 更改为
#a5
- 移动滚动条使#a3出现在屏幕上
- 点击#a7。 URL 更改为
#a7
- 单击浏览器的后退按钮
URL 更改为 #a5 但屏幕上显示 #a3，因为那是您在单击 link 之前所在的位置.
所以，这是预期的行为 according to the whatwg spec。
然而，这不是我想要的行为。那么，让我们来一个肮脏的黑客：
window.onhashchange = function() {
window.location.href = window.location.href;
};
现在，当点击返回时，它会强制页面在本地重新加载（没有服务器请求）并且它会滚动到该元素。
哇，好难啊。
我正在用纯 HTML / CSS（无 JS）构建一个滑块。效果很好，参见 the code。
您需要下载并在本地执行才能理解我的问题，因为它与浏览器的后退和前进按钮有关。
单击链接进行导航时，URL 会更改为#a1、#a7、#a5，无论您在做什么。滑块正确滚动到适当的幻灯片。如果您手动更改 URL，例如将 #a3 替换为 #a7，滑块也将正确滚动。
但是，当您返回（或前进）时，URL 从#a3 变为#a7，但内容不会滚动。
知道为什么吗？知道我可以做些什么来让滚动在后面吗？
我问了一位 Firefox 开发人员，他向我解释了为什么这是预期的行为，而不是错误。
我误解了背部动作是怎么回事。快速回答：它不会转到之前选择的锚点，它会转到主体滚动所在的位置。
问题中仍然使用codepen中的代码：
- 从 CSS 中删除
- 点击#a3，然后点击#a7。内容滚动到#a7
- 单击浏览器的后退按钮
overflow-x: scroll
我以为浏览器正在滚动回#a3。但实际上，它正在滚动到您单击 link 之前的位置。要查看实际效果：
- 点击#a5。 URL 更改为
#a5 - 移动滚动条使#a3出现在屏幕上
- 点击#a7。 URL 更改为
#a7 - 单击浏览器的后退按钮
URL 更改为 #a5 但屏幕上显示 #a3，因为那是您在单击 link 之前所在的位置.
所以，这是预期的行为 according to the whatwg spec。
然而，这不是我想要的行为。那么，让我们来一个肮脏的黑客：
window.onhashchange = function() {
window.location.href = window.location.href;
};
现在，当点击返回时，它会强制页面在本地重新加载（没有服务器请求）并且它会滚动到该元素。
哇，好难啊。