类似与a标签href="#id"的锚点跳转
注意点:vue的锚点不要有a标签 否则会一直刷新 导致锚点跳转出现点击第二次返回顶部的情况
html代码
<div class="rec-dhl">
<ul>
<li @click="ondhl(0,'xshk')" :class="['rec-dhl-a',isdhl == 0 ? 'rec-dhl-active' : '']">新上好课</li>
<li @click="ondhl(1,'jzbx')" :class="['rec-dhl-a',isdhl == 1 ? 'rec-dhl-active' : '']">进站必学</li>
<li @click="ondhl(2,'xxlx')" :class="['rec-dhl-a',isdhl == 2 ? 'rec-dhl-active' : '']">学习路线</li>
<li @click="ondhl(3,'zl')" :class="['rec-dhl-a',isdhl == 3 ? 'rec-dhl-active' : '']">左耳专栏</li>
<li @click="ondhl(4,'xspt')" :class="['rec-dhl-a',isdhl == 4? 'rec-dhl-active' : '']" style="border:0;">限时拼团</li>
</ul>
</div>
css代码
.rec-dhl{
width: 120px;
height: 260px;
background-color: white;
position: fixed;
z-index: 9999;
top: 35%;
left: 0;
box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.rec-dhl ul{
padding: 0;
margin: 0;
}
.rec-dhl ul li{
list-style: none;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.rec-dhl-a{
text-decoration: none;
padding-bottom: 15px;
font-size: 14px;
color: #545C63;
border-bottom: 1.5px solid rgb(0 0 0 / 8%);;
}
.rec-dhl ul li:hover{
color: red;
cursor: pointer;
}
.rec-dhl-active{
color: red;
}
js代码
export default {
data(){
return{
isdhl: 0,//用于点击修改后文字颜色
}
}
},
methods:{
ondhl(isvalue,id){
this.isdhl = isvalue;
let gd = document.getElementById(id);console.log(gd.offsetTop);
window.scrollTo({top : gd.offsetTop - 100, behavior : 'smooth'});
},
}
}
到这里就完成啦!!!