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>也可以实现，但是这样做可以避免< a>的样式冲突，和页面刷新出现404的情况，因为点击< a>之后会改变URL 的值。