html在页面内跳转不改变url,页面添加锚点后如何点击不改变URL？

直接奔主题，前端简单地锚点实现方法大家都会，无非就是在把 a 标签的 href 写成想要跳到的元素的id ，比如点击 页面就会自动滚动到

那么这样使用会产生一个现象，那就是 url 会被改变，浏览器默认的行为会将 id 放在 url 后面。比如：http://www.xxx.com#box

有的时候可能不会产生任何问题，直接跳转过去立马完成产品的需求，但是当存在多个锚点的时候，我们会突然发现用户点击浏览器后退按钮并不会跳转太之前的页面，而是放回上一个带有锚点的链接比如：

http://www.xxx.com#box2 点击后退时 变成了 http://www.xxx.com#box1 其实还在原来的页面只是改变了 hash 值 ？？？？那用户体验是极差的，甚至不注意观察的用户会以为浏览器出了问题，后退按钮不管用了？？？？

现在就记录一下解决的方法。

把a标签替换掉，或者不加href，我们把要点击的按钮绑定一个点击事件，那么这个点击事件需要做什么的？看下面的代码！

//给想要点击的元素绑定事件并传入要跳到元素的id

//因为项目使用vue就直接写@click

//使用document.queryselector实现锚点的效果

changehash(idname) {

document.queryselector(idname).scrollintoview(true);

}

案例：

以上就是实现点击锚点后不改变url的方法。