这里声明一下，a标签锚点跳转和本文跳转不冲突，如果不需要平滑效果，只需要点击跳转锚点连接看此文；：vue实现锚点定位跳转，a标签实现锚点定位跳转
先看看最终效果图：
js锚点跳转添加过度动画，id锚点跳转js添加平滑过度效果
接下来看代码：我的导航栏是动态的，内容列表也是循环出来的，其实道理都一样，基本原理就是找到跳转目标元素距离顶部的距离(document.getElementById(‘#type’)).offsetTop)，然后获取当前距离顶部距离(document.documentElement.scrollTop)，然后用js进行上下滑动操作,接下来看代码,为了看了简介，我删掉了不相关代码：
HTML
<!-- 右侧悬浮导航栏 -->
<div>
<div v-for="(item, indext) in fixList" :key="indext">
<div
@click="tapItem(indext)"
>
{{ item.name}}
</div>
</div>
<div>顶部</div>
</div>
<!-- 商品分组显示页，也就是跳转的目标页 -->
<div
v-for="(item, index) in fixList"
:key="index"
:name="'type-' + index"
:id="'type-' + index"
>
内容区域，视频中的商品列表区....
</div>
JS
tapItem(index) {
// 点击单个分类，跳转到相应的锚点连接,并添加过度动画平滑效果
this.activeBtn = index;
// 需要跳转的目标锚点所在高度,因为定位不准确，应该是以底部为跳转距离了，我这里添加了一个屏幕高度，跳转位置刚好正确，根据项目自己修改
let jumpHeight = (document.getElementById('type-' + index)).offsetTop + (document.documentElement.clientHeight - 90);
// 当前位置距离顶部的高度
let top = document.documentElement.scrollTop
if(jumpHeight > top) {
// 目标高度大于当前高度，说明需要往下滑
let heigth = jumpHeight - top;
if (this.myTimer == -1) { // 这个是一个定时器，用来防止重复点击的
//滑动高度大于10000，在0.8秒内完成平移动画，80可以自己根据实际情况来改就是0.8秒
if (heigth > 10000) {
let num = Number((heigth / 80).toFixed(0));
this.myTimer = setInterval(() => {
top += num;
if (top >= jumpHeight) {
top = jumpHeight;
window.clearInterval(this.myTimer);
this.myTimer = -1;
}
window.scrollTo(0, top);
}, 10);
} else {
// 滑动距离小于10000，按默认速度滑动
this.myTimer = setInterval(() => {
top += 80;
if (top >= jumpHeight) {
top = jumpHeight;
window.clearInterval(this.myTimer);
this.myTimer = -1;
}
window.scrollTo(0, top);
}, 10);
}
}
}else { // 目标高度小于当前高度，说明需要往上滑
let heigth = top - jumpHeight;
if (this.myTimer == -1) {
if (heigth > 10000) {
let num = Number((heigth / 80).toFixed(0));
this.myTimer = setInterval(() => {
top -= num;
if (top <= jumpHeight) {
top = jumpHeight;
window.clearInterval(this.myTimer);
this.myTimer = -1;
}
window.scrollTo(0, top);
}, 10);
} else {
this.myTimer = setInterval(() => {
top -= 80;
if (top <= jumpHeight) {
top = jumpHeight;
window.clearInterval(this.myTimer);
this.myTimer = -1;
}
window.scrollTo(0, top);
}, 10);
}
}
}
},
学废了点个赞呗！
