传统的锚点定位会与vue-router中的路由设置存在冲突,解决方法自定义锚点跳转:
html:
<div id='firstAnchor'>test</div>
<ul>
<li><a href="" @click.prevent="custormAnchor('firstAnchor')">公共报文头</a></li>
</ul>
js:
methods: {
custormAnchor(anchorName) {
// 找到锚点
let anchorElement = document.getElementById(value);
if(anchorElement) {
let total = anchorElement.offsetTop;//定位锚点
//开始滚动
// Chrome
document.body.scrollTop = total
// Firefox
document.documentElement.scrollTop = total
// Safari
window.pageYOffset = total
}
}
}