欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js锚点滚动(由快到慢)

程序员文章站 2022-03-21 22:31:53
功能:点击元素,滚动到页面的某个位置思路:1.获取滚动到的目标位置距离窗口顶部的距离2.点击元素,调用scollTop方法进行赋值案例:1. var nav2 = document.querySelector('.head-nav-2') // 获取点击的元素 var serve = document.querySelector('.serve') // 获取要滚动哪个元素 nav2.addEventListener('click',()=>{ let a...

功能:点击元素,滚动到页面的某个位置
思路:
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

相关标签: js javascript