vue页面滚动到指定位置一看就懂
话不多说,直接上代码
HTML部分
<div>
<button @click="jump()">跳转</button>
</div>
<div id="map" style="width: 500px;height: 500px;">
this is map div
</div>
<div id="box" style="width: 500px;height: 500px;">
this is box div
</div>
js部分
methods: {
jump(){
this.$nextTick(() => {
setTimeout(() => {
//获取指定的div盒
let targetbox = document.getElementById('map')
//获取这个div盒的高度位置
this.target = targetbox.offsetTop
console.log(this.target)
//将滚动条定位到这个高度位置
document.documentElement.scrollTop = this.target
})
})
},
}
虽然这样的跳转使用< a herf=""></ a>也可以实现,但是这样做可以避免< a>的样式冲突,和页面刷新出现404的情况,因为点击< a>之后会改变URL 的值。