a标签有一个锚点定位,用到了#符号,这个定位会影响到路由,所以可以用一个scrollTo方法代替
scrollTo() 方法可把内容滚动到指定的坐标。
语法:
winodw.scrollTo(x,y)
html页面布局
首先
我们设置scrollTop为滚动条到窗口顶端的距离
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
接着
我们需要点击a标签,让元素滚动到指定的坐标
此时我们需要获取元素顶端距离浏览器窗口的高度
这里有四种高度:
- offsetTop:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位。offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离
offsetY则是一个鼠标事件的值,它是相对于你所点击的那个元素的左上角的Y坐标 - scrollHeight, scrollWidth
返回元素的完整的高度和宽度,以像素为单位。
当一个元素拥有滚动条时,当你把滚动条滚到底部的时候,scrollHeight = scrollTop + clientHeight; - offsetHeight 和 offsetWidth
只是报告元素的可见部分的大小。
当没有滚动条时scrollHeight = clientHeight,IE则是等于内容的高度; - scrollTop, scrollLeft
设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候这些像素才有用。这些属性也只在文档的 或 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个
我们如何利用这些高度呢?
- 如果你的元素的高度是固定的
window.addEventListener('scroll', ()=>{
//在外面设置scrollTop是无效的
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//打印滚动条距浏览器顶部高度
console.log(scrollTop)
})
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
我们可以通过scroll事件,让滚动浏览器的滚动条时实时显示滚动条距离页面顶端的距离,而当元素顶端移动到你想它在的位置时的scrollTop就是你想得到的元素顶部距浏览器窗口距离
- 如果你的元素的高度不固定,就需要累加offsetTop
我设计的页面中,需要移动的元素的父元素是body
const height1 = document.getElementById('m1').offsetTop
const height2 = document.getElementById('m2').offsetTop
const height3 = document.getElementById('m3').offsetTop
const height4 = document.getElementById('m4').offsetTop
const height5 = document.getElementById('m5').offsetTop
const height6 = document.getElementById('m6').offsetTop
首先要完成的功能是:点击导航栏中的a标签,a标签变色(加上active的样式),并且a标签对应的模块出现在导航栏的a标签下面
使用的方法:window.scrollTo(x,y)
const navbar = document.querySelector('.navBox')
const btns = document.querySelector('.navigation-bar').children
navbar.addEventListener('click',e => {
let btn = e.target
//点击导航栏中的某个a标签,该a标签变色
if(btn.nodeName === "A"){
for(let i=0; i
紧接着要完成第二个功能:元素滚动到指定位置,对应的a标签变色
在[h1,h2)内,btn的颜色变色
function handleScroll(h1,h2,btn){
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop < h2 && scrollTop >= h1) {
let title = btn
for (let i = 0; i < btns.length; i++){
if (title === btns[i].innerHTML){
btns[i].className = 'active'
}else{
btns[i].className = ''
}
}
}
}
我们可以在发生scroll事件时使用该方法,同时保持导航栏一直在可视范围内
window.addEventListener('scroll', ()=>{
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//滚动条距浏览器顶部高度
console.log(scrollTop)
//保持导航栏一直在视窗顶部
if(scrollTop>=400){
navbar.style.position = 'fixed'
navbar.style.top = '0'
}else{
navbar.style.position = 'absolute'
navbar.style.top = '400px'
}
//滚动条滚动,导航栏颜色随之切换
handleScroll(0,height2-100,'模块一')
handleScroll(height2-100,height3-100,'模块二')
handleScroll(height3-100,height4-100,'模块三')
handleScroll(height4-100,height5-100,'模块四')
handleScroll(height5-100,height6-150,'模块五')
handleScroll(height6-150,height6+document.getElementById('m6').clientHeight,'模块六')
console.log(height6-150)
})
完整代码:
https://github.com/evaSpec/scroller