vue关于锚点定位、跳转到指定位置实现方式
作者：皮卡丘是个程序猿
这篇文章主要介绍了vue关于锚点定位、跳转到指定位置实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue锚点定位、跳转到指定位置
直接上代码
<template>
<div>
<nav class="nav">
<button @click="go('#m1')">昨天</button>
<button @click="go('#m2')">今天</button>
<button @click="go('#m3')">明天</button>
</nav>
<div style="height: 50px;"></div>
<div id="m1">
<h1>昨天</h1>
<div v-for="item in 50">昨天</div>
</div>
<div id="m2">
<h1>今天</h1>
<div v-for="item in 50">今天</div>
</div>
<div id="m3">
<h1>明天</h1>
<div v-for="item in 50">明天</div>
</div>
</div>
</template>
<script>
export default {
data() { return {}; },
methods: {
go(selector) {
document.querySelector(selector).scrollIntoView({
// 不想要滚动动画,则设置为"instant"
behavior: 'smooth', // 滚动动画
block: 'center'
});
}
}
};
</script>
<style scoped>
.nav {
text-align: center;
position: fixed;
top: 0px;
width: 100%;
height: 50px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background: #fff;
}
</style>
vue中锚点定位scrollIntoView
<el-card class="maodian">
<div slot="header" class="clearfix">
<span>maodian</span>
</div>
</el-card>
<el-button
type="text"
@click="handleJump('.maodian')"
>maodian</el-button>
Jump(val) {
const dom = document.querySelector(val);
if (dom) {
dom.scrollIntoView(true);
}
},使用element.scrollIntoView跳转
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。