历史记录和后退按钮。

Question

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

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

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

锚定页面：包含由id属性标记的多个部分的页面，最后可以通过带有#anchorId的URL指向该页面。

Answer 1

我也遇到了同样的问题，请看我的问题anchor links referring to the page sections not working on browser refresh, back and forward

但我必须像普通链接一样工作，所以我做的是通过从哈希中获取元素手动转到该部分。

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

这适用于前进和后退按钮。而且为了刷新你也需要做同样的事情。从哈希中获取元素并手动滚动到该元素。

Answer 2

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

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

＆＃34;以下代码将解析您的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 3

历史记录和后退按钮。

在旧的日子里，后退按钮几乎没有进入浏览器历史记录中的上一项。从那时起，这种情况发生了很大变化，因为它根据一套简单的规则保留了自己的历史。祝你好运，通过标准文档挖掘它。

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

在更改浏览器的默认行为之前，请参考w3c's 'don't brek the back-button。它之所以如此，是因为有一大堆争论和定义标准。

最终，这就是浏览器的功能，因此这是用户所期望的。如果您开始颠覆远离用户期望的行为，您可能会开始惹恼用户。当按钮和链接重复不按预期运行时，用户通常会放弃并离开您的网站。

防止默认。

如果确实必须改变默认行为，那么使用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 4

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

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

4 个答案:

历史记录和后退按钮。

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

防止默认。