In fact, the method is very simple, and it took a lot of detours. I saw various methods used by others, but I couldn't realize it myself. I didn't realize it was so simple until I realized it. It only needs a few lines of code.
What I am doing is a small project imitating the homepage of bilibili, although it is very simple.
Below is a screenshot of the previous page:
The function is very simple, click on the right navigation bar to jump to the content classification of the corresponding location, and at the same time, the color of the right navigation bar will change after clicking.
First, let's take a look at what the more blunt effect looks like:
This is the smooth effect:
In fact, the most critical code is only a few sentences, which are posted as follows:
jump(index) {
this.jumpid = index; //用于点击右侧导航栏的时候，选中部分显示背景色
let jumpitem = document.getElementsByName("jumpitem"); //得到所有的title，包括游戏，音乐，番剧这些
jumpitem[index].scrollIntoView({
behavior:'smooth',
block:'start'
});
},Among them, the function scrollIntoView played a decisive role.
behavior should be written as smooth
block can write start or end, of course, the default is start
Full code:
<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>
Overall page effect:
The current component only includes the content in the screenshot just now, and the other content belongs to other components.
If you have any questions, you are welcome to communicate in the comment area. I think this code is very simple. If you don’t understand, you can discuss it together. You can use the comment area or private message