页面点击锚点后不改变URL的方法

前端简单地锚点实现方法无非就是在把 a 标签的 href 写成想要跳到的元素的id ，比如点击<a href="#box"></a>页面就会自动滚动到 <div id="box"></div> 元素的位置。

这样会导致url会改变,浏览器默认的行为会将 id 放在 url 后面。比如：http://www.xxx.com#box

当存在多个锚点的时候，我们会突然发现用户点击浏览器后退按钮并不会跳转太之前的页面，而是放回上一个带有锚点的链接.

解决办法: 把a标签替换掉，或者不加href，把要点击的按钮绑定一个点击事件.

//给想要点击的元素绑定事件并传入要跳到元素的id
//因为项目使用Vue就直接写@click
<a @click="changeHash('#test')"></a>
//不是Vue时
<a onclick="changHash('#test')"></a>

//使用document.querySelector实现锚点的效果
changeHash(idname) {
    document.querySelector(idname).scrollIntoView(true);
}

来源：CSDN

作者：smile radiantly

链接：https://blog.csdn.net/zhixingwu/article/details/104464895