vue页面滚动到指定位置

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>的样式冲突，和页面刷新出现404的情况，因为点击< a>之后会改变URL 的值。