前段时间在做官网项目的时候，遇到锚点链接跳转的操作，使用传统的 a 标签，也试过js的 scrollIntoView 方法,都没能很好的解决我的问题。于是结合网上各种文章并做了调整之后，发现此方法挺好用的，在此记录：
// html部分没什么好说的
// 需要注意 activeClick()这块，'block': 标签名字 index: 下标 50： 每次滚动的距离
<div class="top" id="boxFixed" :class="{'is_fixed' : isFixed}">
<ul>
<li style="margin-right:57px;">品类</li>
<li >
<a v-for="(i, index) in list" :key="index" @click="activeClick('block'+ index, 50, index)" :class="{'active': colorChange == index}">{{i.value}}</a>
</li>
</ul>
</div>
// 这块也有需要注意的：此处我用了组件的写法，要想实现锚点链接跳转，需要在外层嵌套div
<div ref="block0"><jj ></jj></div>
<div ref="block1"><mj ></mj></div>
<div ref="block2"><cj></cj></div>
<div ref="block3"><jk ></jk></div>
<div ref="block4"><other ></other></div>
// js部分
<script>
export default {
data () {
return {
isFixed: false, // 是否吸顶
offsetTop: 0, // 对象距离顶部距离
colorChange: 0, // 默认颜色下标
list: [
{value: '智能家居'},
{value: '智能门禁'},
{value: '智能车禁'},
{value: '智能监控'},
{value: '其他智能产品'},
]
}
},
mounted () {
window.addEventListener('scroll', this.initHeight)
this.$nextTick(() => {
//获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
this.offsetTop = document.querySelector('#boxFixed').offsetTop
})
},
methods: {
initHeight () {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置的距离
this.isFixed = scrollTop > this.offsetTop ? true : false
},
//el 标签 speed 滚动速率 此处是50px 值越大滚动的越快
activeClick (el, spend, index) {
this.colorChange = index
let windowH = window.innerHeight // 浏览器窗口高度
let h = this.$refs[el].offsetHeight //模块内容高度
let t = this.$refs[el].offsetTop // 模块相对于内容顶部的距离
let top = t- 200 // 需要滚动到的位置，改为t则滚动到模块顶部
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop //滚动条距离顶部高度
let currentTop = scrollTop //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
let requestId
//采用requestAnimationFrame，平滑动画
function step () {
// 判断让滚动条向上滚还是向下滚
if (scrollTop < top) {
if (currentTop <= top) {
// window.scrollTo(x,y) y为上下滚动位置
window.scrollTop(0, currentTop)
requestId = window.requestAnimationFrame(step)
} else {
requestId = window.requestAnimationFrame(requestId)
}
//向下滚动
currentTop += spend
} else {
if (top <= currentTop) {
window.scrollTop(0, currentTop)
requestId = window.requestAnimationFrame(step)
} else {
window.cancelAnimationFrame(requestId)
}
//向上滚动
currentTop -= spend
}
}
}
}
}
</script>
