跳转页面滚动到页面指定位置（scrollIntoView）

经常使用到scrollIntoView这个函数，但是没有记录过，今天写个demo 一个简单的使用

需求:点击按钮A跳转到页面B后，B页面滚动到指定位置;

A页面，home.vue

<template>
	<div>
 		<el-button type="primary"  @click="toOpen()">跳转按钮</el-button>
 	</div>
</template>
<script>
export default {
  created() {},
  mounted() {},
  data() {
    return {}
  },
  methods: {
    toOpen() {
    // 添加参数Anchor，滚动到指定位置，否则不滚动
		this.$router.push({ path: '/open', query: { Anchor: 1 } })
    }, 
  }
}
</script>

B页面，open.vue

<template>
	<div class="openPage">
		<div class="one"></div>
		<div class="tow"></div>
		<div class="three"></div>
		<div class="four" id="pronbit"></div>
 	</div>
</template>
<script>
export default {
  created() {},
  mounted() {
    this.toPoint()
  },
  beforeDestroy() {
   // 离开页面时回到顶部  防止跳转别的页面还是停留在滚动到的位置
    document.body.scrollTop = document.documentElement.scrollTop = 0
  },
  data() {
    return {
    }
  },
  methods: {
    toPoint() {
    // 存在参数Anchor  则滚动到指定位置，否则不滚动
      let key = this.$route.query.Anchor
      if (key != undefined && key == '1') {
        let view = document.getElementById("pronbit");
        console.log(view);
        view.scrollIntoView({
          behavior: "smooth",  // 平滑过渡
          block: "start"  // 上边框与视窗顶部平齐。默认值
        });
      }
    }, 
  }
}
</script>
<style scoped>
.one,.tow,.three,.four{
	 height:400px;
	 width:100%;
}
.one{
	background: red;
}
.tow{
	background: green;
}
.three{
	background: blue;
}
.four{
	background: pink;
}
</style>