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