效果:点击导航栏菜单,定位到指定的地方
适用于单界面操作
javascript
<template>
<el-menu>
<el-menu-item index="1" @click="scrollToAnchor('section1')">Section 1</el-menu-item>
<el-menu-item index="2" @click="scrollToAnchor('section2')">Section 2</el-menu-item>
</el-menu>
<div style="height: 1000px;"> <!-- 假设页面有足够的高度以展示滚动效果 -->
<h2 id="section1">Section 1</h2>
<!-- 更多内容 -->
<h2 id="section2">Section 2</h2>
<!-- 更多内容 -->
</div>
</template>
<script>
export default {
methods: {
scrollToAnchor(anchorId) {
const element = document.getElementById(anchorId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
}
}
</script>