指向页面部分的锚链接无法在浏览器刷新，后退和前进 [英] anchor links referring to the page sections not working on browser refresh, back and forward

问题描述

我制作了一个带页面内链接的html页面。

 < div> 
< a href =＃first>第一个< / a> 
< a href =＃second>秒< / a> 
< div id =first> First div< / div> 
< div id =second>第二个div< / div> 
< / div> 
  

但是这段代码不适用于页面刷新和浏览器后退和前进按钮。
有谁知道如何解决这个问题。我不寻找历史api html5和历史插件的jquery。想要以其基本格式创建它。

解决方案

好的，我已经在大量尝试之后发现了如何去做。现在这处理我的目的，所以我正在继续这个解决方案。

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $（window.location.hash）.offset（）。top;
$（window）.scrollTop（top）;
}

这适用于向前和向后按钮，并且对于刷新，我们也需要做同样的事情。从哈希中获取元素并手动滚动到该元素。

I have made a html page with links inside the page.

<div>
<a href="#first">first</a>
<a href="#second">second</a>
<div id="first">First div</div>
<div id="second">Second div</div>
</div>

But this code doesn't work on page refresh and browser back and forward buttons. Does anyone know how to solve this problem. I am not looking for history api of html5 and history plugin of jquery. Want to create this in its basic format.

解决方案

Ok I have found out how to do it after a lot of attempts. Right now this handles my purpose so I am going ahead with this solution.

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

This works for forward and back buttons. And for refresh also we need to do the same thing. Get the element from the hash and scroll to that element manually.

这篇关于指向页面部分的锚链接无法在浏览器刷新，后退和前进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！