前端当中html锚点链接的用法很简单,相信大家都会:
<a href="#top">点击我</a>
<div id="top">头部</div>
然而这样使用会产生一个现象,那就是 url 会被改变,浏览器默认的行为会将 id 放在 url 后面。比如:http://www.xxx.com#box
有的时候可能不会产生任何问题,直接跳转过去立马完成产品的需求,但是当存在多个锚点的时候,我们会突然发现用户点击浏览器后退按钮并不会跳转太之前的页面,而是放回上一个带有锚点的链接比如:
http://www.xxx.com#box2 点击后退时 变成了 http://www.xxx.com#box1 其实还在原来的页面只是改变了 hash 值 ????那用户体验是极差的,甚至不注意观察的用户会以为浏览器出了问题,后退按钮不管用了????
解决的方法:
不加href,我们把要点击的按钮绑定一个点击事件:
//给想要点击的元素绑定事件并传入要跳到元素的id
//因为项目使用Vue就直接写@click
<a @click="changeHash('#box2')"></a>
//使用document.querySelector实现锚点的效果
changeHash(idName) {
document.querySelector(idName).scrollIntoView(true);
}