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

实现锚点滚动，需要两个方面的因素：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)
}