浏览器后退按钮不适用于锚链接

Question

在我页面的页脚中，有一些链接使用锚标记（# 附加到页面的 URL）指向同一页面上的不同部分。

这工作正常，只是浏览器后退按钮不起作用：我无法从导航到锚定页面的位置移回上一页。

这里的简单问题是，在锚定页面中导航几次后是否可以返回上一页？ 如果是，那么请你建议如何？

锚定页面：具有多个由 id 属性标记的部分的页面，这些部分可以由末尾带有#anchorId的 URL #anchorId 。

Answer 1

我也遇到了同样的问题，请参阅我的问题锚链接，这些链接指的是无法在浏览器刷新、后退和前进中工作的页面部分

但是我必须按照普通链接的工作方式来做，所以我所做的是通过从散列中获取元素来手动转到该部分。

$(window).on('hashchange', function () 
{
    var top = $(window.location.hash).offset().top;
    $(window).scrollTop(top);
});

这适用于前进和后退按钮。 对于刷新，您也需要做同样的事情。 从散列中获取元素并手动滚动到该元素。

Answer 2

历史和后退按钮。

在过去，后退按钮的作用与浏览器历史记录中的前一项相比几乎没有。 从那时起，情况发生了很大变化，因为它根据一组稍微简单的规则保留了自己的历史记录。 祝你好运挖掘标准文档找到它。

UI/UX 以及为什么不改变预期行为。

请参考w3c 的“在更改浏览器的默认行为之前不要破坏后退按钮” 。 出于某种原因，经过大量的辩论和定义标准，这样做是有原因的。

归根结底，这就是浏览器所做的，这也是用户所期望的。 如果你开始颠覆用户期望的行为，你很可能会开始激怒你的用户。 当按钮和链接反复出现不符合预期的行为时，用户通常会放弃并离开您的网站。

防止违约。

如果你真的必须改变默认行为，使用 javascript 将是最好的方法：

<a href="#id" onclick="return gotoAnchor(this);">

<script>
function gotoAnchor(elm) {
    window.event.returnValue = false;
    var url = location.href;

    location.href = elm.href;
    history.replaceState(null,null,url);

    return false;
}
</script>

Answer 3

http://www.the-art-of-web.com/javascript/remove-anchor-links/

访问那个网站。 滚动到底部并使用测试锚点。 它正在做你想做的事。

“以下代码将解析您的 HTML 页面并覆盖以同一页面上的锚点为目标的任何链接的功能。链接功能将被替换为对目标元素的 scrollIntoView 方法的调用：

document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("A");
  for(var i=0; i < links.length; i++) {
    if(!links[i].hash) continue;
    if(links[i].origin + links[i].pathname != self.location.href) continue;
    (function(anchorPoint) {
      links[i].addEventListener("click", function(e) {
        anchorPoint.scrollIntoView(true);
        e.preventDefault();
      }, false);
    })(document.getElementById(links[i].hash.replace(/#/, "")));
  }
}, false);

Answer 4

if (document.referrer == "") {
window.open("index.php");
} else {
    window.history.go(-1);
    return false;
}