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

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值