平时在浏览一些书籍页面时
我们经常会通过点击目录来直接跳到对应的内容区域,如下(维基百科截的图):
当点击其中一个标签时,就会直接到页面下方对应的内容区,比如点击评价时,
如上图,页面直接下滑到对应的内容区。
其实,这就是通过页面的滚轮跳转实现的,代码不多,两行就可以实现:
One.addEventListener("click",(e)=>{
// 先计算需要跳转的元素到页面顶部的距离
let high = oLife.offsetTop
// 通过滚轮高度跳转
document.documentElement.scrollTop = high
})
首先获取需要跳转到的目标元素的顶部到页面顶部的距离,也就是元素的offsetTop属性,
然后赋值给页面的滚轮高度就可以了!
知识拓展:通过scaleY(-1)可以将图片倒转,可以运用在箭头图片上喔,如下:
在展开或者折叠导航栏的时候也可以用到,只需要一张向下或向上的箭头img,就可以通过scaleY(-1)或者scaleY(1)达到箭头效果啦