ityadong / VueAnchor

😎😎😎 Vue实现类似 jq的 滚动条滚动动画效果(自动锚点)

Home Page:https://ityadong.github.io/staticDemo/VueAnchor/index.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

代码简写

Rabbitzzc opened this issue · comments

/*向下滚动*/
if (distance < top) {
    let small_interval = (top - distance) / 50
    let i = 0
    let timer = setInterval(() => {
        i++
        // console.log(distance += small_interval)
        document.documentElement.scrollTop = distance
        if (i == 50) {
            clearInterval(timer)
        }
    }, 10)
}
/*向上滚动*/
else if (distance > top) {
    let small_interval = (distance - top) / 50
    let i = 0
    let timer = setInterval(() => {
        i++
        // console.log(distance -= small_interval)
        document.documentElement.scrollTop = distance
        if (i == 50) {
            clearInterval(timer)
        }
    }, 10)
}
=========>可以简写为下面的样式。
// top-distance,如果>0向下滚动,如果<0向上滚动,直接使用
let small_interval = (top - distance) / 50
// console.log(small_interval)
if(small_interval !== 0) {
    let i = 0
    let timer = setInterval(() => {
        i++
        distance += small_interval
        document.documentElement.scrollTop = distance
        if (i == 50) {
            clearInterval(timer)
        }
    }, 10)
}

这里就是加上负数,等于减去正的