直接奔主题,前端简单地锚点实现,把 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('#box2')"></a> //使用document.querySelector实现锚点的效果 changeHash(idName) { document.querySelector(idName).scrollIntoView(true); }