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

Question

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

这工作正常,只是浏览器后退按钮不起作用:我无法返回到我导航到锚定页面的上一页.

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

锚定页面:具有由id属性标记的多个部分的页面,可以由#anchorId末尾的URL指向.

Answer 1

我也遇到了同样的问题,看到我的问题锚链接指的是页面部分没有处理浏览器刷新,后退和前进

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

$(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/

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

“以下代码将解析您的 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);