跳转页面滚动到页面指定位置(scrollIntoView)
经常使用到scrollIntoView这个函数,但是没有记录过,今天写个demo 一个简单的使用需求:点击按钮A跳转到页面B后,B页面滚动到指定位置;A页面,home.vue<template><div><el-button type="primary"@click="toOpen()">跳转按钮</el-button></div><
·
经常使用到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>
更多推荐
已为社区贡献4条内容
所有评论(0)