直接上代码
<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>