实现方式
element.scrollIntoView();
参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
实现代码
goAnchor(selector) {
this.$el.querySelector(selector).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
}
参数
- behavior: 定义动画过渡效果,auto 或 smooth 之一。默认为 auto。
- block:可选,定义垂直方向的对齐,start、center、end 或 nearest 之一。默认为 start。
- inline: 可选,定义水平方向的对齐,start、center、end 或 nearest 之一。默认为 nearest。
完整示例代码
<template>
<div class="main">
<!-- 菜单 -->
<div class="nav">
<a href="javascript:" @click="goAnchor('#Java')">Java</a>
<a href="javascript:" @click="goAnchor('#Python')">Python</a>
<a href="javascript:" @click="goAnchor('#Javascript')">Javascript</a>
</div>
<!-- 内容 -->
<div class="item">
<div class="title" id="Java">Java</div>
<div class="content"></div>
</div>
<div class="item">
<div class="title" id="Python">Python</div>
<div class="content"></div>
</div>
<div class="item">
<div class="title" id="Javascript">Javascript</div>
<div class="content"></div>
</div>
</div>
</template>
<script>
export default {
methods: {
// 标签滚动
goAnchor(selector) {
this.$el.querySelector(selector).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
}
}
};
</script>
<style scoped>
.main {
width: 600px;
margin: 0 auto;
margin-top: 20px;
}
.nav a {
text-decoration: none;
color: #333;
padding: 0 10px;
margin: 0 5px;
background: #9e9e9e;
line-height: 2;
}
.nav {
display: flex;
flex-direction: row;
justify-content: center;
}
.item{
margin-top: 20px;
}
.title{
background: #9e9e9e;
line-height: 2;
}
.content {
height: 300px;
background: #eeeeee;
}
</style>
问题
1、要获取的节点不在当前组件内,没有ref
引用,可以直接获取全局的节点,使用document
document.querySelector(selector).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
2、如果在循环列表,或多个子节点中使用id选择器要注意,id不能重复,可以使用uuid
给每个元素分配一个唯一id。
import { v4 as uuidv4 } from 'uuid';
console.log(uuidv4());
// 92b8a6bd-f1fd-4b52-b8a0-6178a0e76828
具体使用方式见: Node.js:创建一个随机的UUID