html页面滚动 锚点,页面实现锚点滚动的滑动效果

实现锚点滚动，需要两个方面的因素：1，锚，即我们点击的地方。2，目标位置，即页面需要滚动的距离。

1 锚点 anchor

通俗的讲就是导航，如百度百科的

我们可以点击右侧的锚点，从而使得页面滚动到指定的位置。

锚点相对比较容易，我们只需要在对应的位置加上事件即可，给每个需要滚动锚点加绑定滚动的方法。

2.目标距离

如何计算需要滚动的距离，准确定位锚点的位置，

计算公式为：需要滚动的距离 = 滚动区域内锚点之上的所有元素的高度和

有了锚点事件，有了需要滚动的位置点，那么剩下的就很简单了。

锚点触发滚动事件：

document.documentElement.scrollTop = 锚点位置点

此时锚点定位就完成了，剩下的就是如何平滑的滚动了。

js的滚动不比css，不能实现transform,或者animate，那么我们可以用定时器来实现，

fn(){

let timer = null

clearInterval(timer)

timer = setInterval(()=>{

document.documentElement.scrollTop = document.documentElement.scrollTop - 50

if(document.documentElement.scrollTop<50){

document.documentElement.scrollTop = 0

clearInterval(timer)

}

},10)

}