javascript: 锚点下滑+滚动点亮nav (ES5)

使用方法

let a = new ClickScroll()
a.navBtns = [dom1, dom2, dom3] // 导览列dom元素，阵列
a.targetEls = [dom4, dom5, dom6] // 目标dom元素，阵列
a.init() // 注册点击事件
a.exH = -100 // 额外距离，不一定要有
a.initScroll() // 注册滚动事件，不一定要有
a.removeScroll() // 移除滚动事件，不一定要有

使用前，需先引入

function ClickScroll (navBtns, targetEls) {
this.exH = 0
this.targetElsDistance = []
this.navBtns = navBtns
this.targetEls = targetEls
}

// 为每个navBtn注册click事件
ClickScroll.prototype.init = function () {
this.navBtns.forEach( (btn, index) => {
btn.addEventListener(\'click\', (e) => {
e.preventDefault()
this.computeDistance()
this.handleScroll(index)
})
})
}

// 注册全域滚动事件
ClickScroll.prototype.initScroll = function () {
window.addEventListener(\'scroll\', this.detectScroll.bind(this))
}

// 移除滚动事件
ClickScroll.prototype.removeScroll = function () {
window.removeEventListener(\'scroll\', ClickScroll.prototype.detectScroll)
}

// 计算目标DOM元素们，距离元件最顶端距离
// 最后，距离数值填入阵列
ClickScroll.prototype.computeDistance = function () {
this.targetElsDistance.length = 0
this.targetEls.forEach( el => {
let distance = 0
while (el && el.nodeName !== \'BODY\') {
distance += Number(el.offsetTop)
el = el.offsetParent
}
this.targetElsDistance.push(distance)
})
}

// 执行滚动，距离是targetElsDistance + exH
ClickScroll.prototype.handleScroll = function (index) {
window.scrollTo({
top: this.targetElsDistance[index] + this.exH,
behavior: \'smooth\',
})
}

// 只有自己新增\'active\'的className，其余DOM取消\'active\'
ClickScroll.prototype.addRemoveActive = function (target) {
if (target.classList.contains(\'active\')) return

this.navBtns.forEach( btn => {
btn.classList.remove(\'active\')
})
target.classList.add(\'active\')
}

ClickScroll.prototype.detectScroll = function () {
this.computeDistance()
let arr = this.targetElsDistance
let exH = this.exH - 5

if (scrollY < arr[0] + exH) {
this.navBtns.forEach( btn => {
btn.classList.remove(\'active\')
})
return
}
if (scrollY > arr[arr.length - 1] + exH) {
this.addRemoveActive(this.navBtns[arr.length - 1])
return
}
for (let i = 0; i < arr.length - 1; i++) {
if (scrollY > arr[i] + exH && scrollY < arr[i+1] + exH) {
this.addRemoveActive(this.navBtns[i])
}
}
}