需求

在页面刚启动时,滚动到指定位置(1秒内,过渡效果)

code

    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帧下的建议刷新频率,别问为什么,百度的?
    }

优化

细节

过渡时间一秒,但是像我这样的急性子,就是想让它提前停下来?

        window.document.querySelector('body').onscroll = () => {
            // 因为设置滚动就会触发此事件,所以需要加判断条件
            window.document.querySelector('body').scrollTop<tempTop && clearInterval(timeOut);
            // 类似的移动端顶部菜单下拉隐藏,上拉显示,也可根据此原理顺势展开
            // 下拉情况: scrollTop > xxx => 隐藏菜单
            // 上拉显示:  出现上拉操作,记录当前高度,知道超过某一阀值,则进行菜单弹出操作
        }

自动化

元素的高度是我手动测出来的,但是实际上应该可以程序自动给出的

element.offsetTop => 元素到父元素的顶部的距离

function getElementToPageTop(el) {
  if(el.parentElement) {
    return this.getElementToPageTop(el.parentElement) + el.offsetTop
  }
  return el.offsetTop
}

模块化

也可封装成模块,运用到类似ToTop功能上

Last modification:August 26, 2019
如果觉得文章对你有所收获,可以请笔者喝杯咖啡