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

zzwlnbp8  于 2023-03-16  发布在  Java
关注(0)|答案(5)|浏览(132)

在我的页面的页脚有一些链接,指向同一页面上的不同部分使用锚标记(#附加到页面的URL)。
这可以正常工作,只是浏览器的后退按钮不起作用:我无法从导航到锚定页面的位置移回上一页。
这里的简单问题是,在锚定页面中导航几次后,是否有可能返回到上一页?如果有,请您建议如何操作?
锚定页面:该页面包含几个由id属性标记的部分,可以通过末尾带有#anchorId的URL指向这些部分。

6pp0gazn

6pp0gazn1#

我也遇到了同样的问题,请参见我的问题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);
});

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

wkyowqbh

wkyowqbh2#

历史记录和后退按钮。

在过去,后退按钮只不过是回到浏览器历史记录中的上一个项目。从那以后,这一点发生了很大的变化,因为它根据一套简单的规则来保存自己的历史记录。不过,祝你好运,在标准文档中找到它。

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>
mqkwyuun

mqkwyuun3#

http://www.the-art-of-web.com/javascript/remove-anchor-links/
访问该网站。滚动到底部并使用测试锚。它正在做你想要的。
“下面的代码将分析HTML页,并重写指向同一页上锚点的任何链接的函数。link函数将被替换为对目标元素的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);
blpfk2vs

blpfk2vs4#

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

c86crjj05#

不用jQuery,也不用修改每个锚元素:

<script>
    // Makes sure we jump to anchor on reload
    document.addEventListener("DOMContentLoaded", function (event) {
        var ele = document.getElementById(window.location.hash.substring(1));
        ele.scrollIntoView();
    });

    // Makes sure we jump to anchor when doing back and forward
    window.addEventListener('hashchange', () => {
        var ele = document.getElementById(window.location.hash.substring(1));
        ele.scrollIntoView();
    }, false);
</script>

相关问题