其实方法很简单，也是走了很多弯路，见别人用的各种方法，但是自己都实现不了，等到实现的时候才发现原来如此简单，只需要几句代码即可。
做的是对bilibili首页仿写的一个小项目，虽然很简陋就是了。
下面上一下页面的截图：
功能很简单，点击右侧导航栏能够跳转到对应位置的内容分类上，同时右侧导航栏的点击之后将变色。
首先先看一下比较生硬的效果是什么样的：
这个是平滑的效果：
其实最最关键的代码只有几句，现贴出来如下：
jump(index) {
this.jumpid = index; //用于点击右侧导航栏的时候，选中部分显示背景色
let jumpitem = document.getElementsByName("jumpitem"); //得到所有的title，包括游戏，音乐，番剧这些
jumpitem[index].scrollIntoView({
behavior:'smooth',
block:'start'
});
},其中，函数scrollIntoView起了决定性的作用。
behavior要写成smooth
block可以写start，也可以是end，当然，默认是start
完整代码：
<template>
<div class="content">
<div class="dh" name="jumpitem" ref="content1" :id="'id'+index">动画</div>
<div class="donghua">
<ul class="firstPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="zb" name="jumpitem" ref="content2" :id="'id'+index">直播</div>
<div class="zhibo">
<ul class="secondPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="fj" name="jumpitem" ref="content3" :id="'id'+index">番剧</div>
<div class="fanju">
<ul class="thirdPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="yy" name="jumpitem" ref="content4" :id="'id'+index">音乐</div>
<div class="yinyue">
<ul class="forthPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="wd" name="jumpitem" ref="content5" :id="'id'+index">舞蹈</div>
<div class="wudao">
<ul class="fifthPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<div class="yx" name="jumpitem" ref="content6" :id="'id'+index">游戏</div>
<div class="youxi">
<ul class="sixthPart">
<li v-for="(item, index) in list" :key="index">
<a href="" class="a1">{
{ item }}</a>
</li>
</ul>
</div>
<!-- 导航栏 -->
<div class="navfield">
<div class="navbox">
<div
class="navitems"
v-for="(item, index) in navitems"
:key="item"
:class="{ activated: jumpid == index }"
>
<a @click="jump(index)" class="nava">{
{
item.title
}}</a>
</div>
</div>
</div>
<div class="top">
<a href="">顶部</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
"第一个内容",
"第二个内容",
"第三个内容",
"第四个内容",
"第五个内容",
"第六个内容",
"第七个内容",
"第八个内容",
"第九个内容",
"第十个内容",
],
//'动画','直播','番剧','音乐','舞蹈','游戏'
navitems: [
{
title: "动画",
pointer: "animation",
},
{
title: "直播",
pointer: "live",
},
{
title: "番剧",
pointer: "banngumi",
},
{
title: "音乐",
pointer: "music",
},
{
title: "舞蹈",
pointer: "dance",
},
{
title: "游戏",
pointer: "game",
},
],
jumpid: 0,
naviitemstate: true, //点击导航栏时，暂时停止监听页面滚动
};
},
methods: {
jump(index) {
this.jumpid = index; //用于点击右侧导航栏的时候，选中部分显示背景色
let jumpitem = document.getElementsByName("jumpitem"); //得到所有的title，包括游戏，音乐，番剧这些
jumpitem[index].scrollIntoView({
behavior:'smooth',
block:'start'
});
// jumpitem[index].scrollIntoView();
},
},
mounted() {
},
};
</script>
<style scoped>
* {
padding: 0;
margin: 0;
text-decoration: none;
}
.dh {
font-size: 1.8em;
}
.zb {
font-size: 1.8em;
}
.fj {
font-size: 1.8em;
}
.yy {
font-size: 1.8em;
}
.wd {
font-size: 1.8em;
}
.yx {
font-size: 1.8em;
}
ul {
list-style: none;
}
.a1 {
display: inline-block;
width: 233px;
height: 150px;
}
.content {
width: 70%;
margin-left: 200px;
}
.donghua {
width: 1200px;
height: 400px;
}
.zhibo {
width: 1200px;
height: 400px;
}
.fanju {
width: 1200px;
height: 400px;
}
.yinyue {
width: 1200px;
height: 400px;
}
.wudao {
width: 1200px;
height: 400px;
}
.youxi {
width: 1200px;
height: 400px;
}
.firstPart {
display: flex;
flex-wrap: wrap;
}
.firstPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.secondPart {
display: flex;
flex-wrap: wrap;
}
.secondPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.thirdPart {
display: flex;
flex-wrap: wrap;
}
.thirdPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.forthPart {
display: flex;
flex-wrap: wrap;
}
.forthPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.fifthPart {
display: flex;
flex-wrap: wrap;
}
.fifthPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.sixthPart {
display: flex;
flex-wrap: wrap;
}
.sixthPart li {
width: 233px;
height: 150px;
border: 1px solid black;
}
.navfield {
position: relative;
}
.navbox {
background-color: #fff;
position: fixed;
top: 300px;
right: 10px;
border: 1px solid black;
border-radius: 10px;
}
.navitems {
width: 80px;
height: 50px;
text-align: center;
border-radius: 10px;
}
.top {
width: 50px;
height: 50px;
text-align: center;
border-radius: 50%;
margin-top: 10px;
border: 1px solid black;
position: absolute;
right: 24px;
bottom: 270px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
color: black;
}
.nava {
display: inline-block;
margin-top: 10px;
cursor: pointer;
}
.activated {
background-color: rgba(64, 160, 209, 1);
}
</style>
整体页面效果：
当前的组件只包括刚才截图中的内容，其他的内容是其他组件的。
如果大家有什么问题，欢迎大家在评论区交流，我这个代码我觉得写得很简单了，如果有不明白的可以一起讨论，评论区或者私信都可以