需求
在页面刚启动时，滚动到指定位置（1秒内，过渡效果）
code
1
2
3
4
5
6
7
8
| window.onload = function() {
let tempTop = 0;
let timeOut = setInterval( () => {
tempTop += 10;
window.document.querySelector('body').scrollTop = tempTop;
tempTop > 700 && clearInterval(timeOut); //前面不为真后面不执行，just cool
}, 16.7) // 60帧下的建议刷新频率，别问为什么，百度的?
}
|
优化
细节
过渡时间一秒，但是像我这样的急性子，就是想让它提前停下来？
1
2
3
4
5
6
7
| window.document.querySelector('body').onscroll = () => {
// 因为设置滚动就会触发此事件，所以需要加判断条件
window.document.querySelector('body').scrollTop<tempTop && clearInterval(timeOut);
// 类似的移动端顶部菜单下拉隐藏，上拉显示，也可根据此原理顺势展开
// 下拉情况： scrollTop > xxx => 隐藏菜单
// 上拉显示: 出现上拉操作，记录当前高度，知道超过某一阀值，则进行菜单弹出操作
}
|
自动化
元素的高度是我手动测出来的，但是实际上应该可以程序自动给出的
[scode type=”green”]element.offsetTop => 元素到父元素的顶部的距离[/scode]
1
2
3
4
5
6
| function getElementToPageTop(el) {
if(el.parentElement) {
return this.getElementToPageTop(el.parentElement) + el.offsetTop
}
return el.offsetTop
}
|
[scode type=”share”]原文：https://blog.csdn.net/u013764814/article/details/83825479 [/scode]
模块化
也可封装成模块，运用到类似ToTop功能上