当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js锚点滚动（由快到慢）

js锚点滚动（由快到慢）

2020年07月24日  | 移动技术网IT编程  | 我要评论

功能：点击元素，滚动到页面的某个位置
思路：
1.获取滚动到的目标位置距离窗口顶部的距离
2.点击元素，调用scollTop方法进行赋值
案例：
1.

 var nav2 = document.querySelector('.head-nav-2') // 获取点击的元素
 var serve = document.querySelector('.serve') // 获取要滚动到哪个元素
  nav2.addEventListener('click',()=>{
              let aa = 6 // 设置一个变量  使滚动由快到慢
             let scollHeight = serve.offsetTop // 获取元素到顶部的距离
              console.log(scollHeight)
              // 设置定时器
            const location = setInterval(()=>{
                const speed = scollHeight / aa  // 每次滚动多少
                // 当前滚动位置小于元素到顶部的距离
                if(document.documentElement.scrollTop <= scollHeight){
                    document.documentElement.scrollTop += speed // 和回到顶部不同，需要每次加上步长值 
                  aa+=3 // 每走一次 使下次的步长值变小
                }else{
                
                    clearInterval(location)
                }
            },30)
        })

这个和上面不同，需要滚动到底部 ，需要 body高度 - 视口的高度 = 要滚动的距离（如果获取元素到视口的距离，会出现滚动条无法达到位置，因为滚动条的距离是被卷去的距离）

 var nav6 = document.querySelector('.head-nav-6') // 获取点击元素
 var body = document.querySelector('body')  // 获取body
 var rool = body.offsetHeight - window.innerHeight // 获取滚动距离
     nav6.addEventListener('click',()=>{ 
             let aa = 6
            const location = setInterval(()=>{  
                const speed = rool / aa
                if(document.documentElement.scrollTop <= rool - 30){
                    document.documentElement.scrollTop += speed
                 aa+=3
                }else{
                    clearInterval(location)
                }
            },30)
        }) 
   // roll - 30 是因为数值出现误差 到达底部了没有清除定时器

本文地址：https://blog.csdn.net/A_Brave/article/details/107536211

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网