<template>
<el-container>
<el-aside>
<el-menu mode="vertical" default-active="menu1" @select="handleSelect">
<el-menu-item
v-for="(menu, index) in dataMenu"
:index="index"
:key="'menu'+index"
>
<i class="el-icon-lightning"></i>
<span slot="title">{{ menu }}</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<div class="item"
v-for="(menu, index) in dataMenu"
:key="'menu'+index"
:id="'item'+index"
>
aaaaaa === {{menu}}
</div>
</el-main>
</el-container>
</template>
<script>
export default{
data() {
return{
dataMenu: ["标题一","标题二","标题三","标题四"],
}
},
methods:{
handleSelect (e) {
let selector = '#item'+e;
document.querySelector(selector).scrollIntoView({
behavior: "smooth"
});
},
}
}
</script>
<style>
.item {
width: 100%;
height: 500px;
line-height: 150px;
text-align: center;
}
</style>
VUE实现锚点滚动
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 首先是一些说明 动画效果是原生 js 实现，不可能为了这么一个动画引用 Jquery 这么大一个库 因为是在 vu...
- html代码 js关键代码 参考网址：https://www.cnblogs.com/ljy-/articles/...
- 实现效果说明 整体布局，内容和导航联动起来，内容滚动时电梯导航栏跟随内容指定对应楼层，点击导航，滚动到指定内容。 ...
- 需求：button悬浮固定在页面底部，情况1：点击 button时滚动到指定位置， button消失，情况2：页面...
