• js返回顶部,加过渡效果


    设置页面y轴位置:

    windows.scrollTo(x, y);

    核心代码,以下代码加到返回顶部按钮点击事件函数中即可:

    1. 无固定时间,匀速向上

    let scrollTop = window.pageYOffset;
    // 每0.01秒向上移动100像素,直到小于或等于0结束
    let timer = setInterval(() => {
        scrollTop -= 100;
        // 为负数,浏览器会不处理得
        window.scrollTo(0, scrollTop);
        if (scrollTop <= 0) {
            clearInterval(timer)
        }
    }, 10)

    2. 固定时间执行完匀速向上滑动(需计算以下每次向上多少像素)

    // 到顶部完成时间0.5秒
    let finished_time = 500;
    // 每0.01秒向上运动一次
    let interval_time = 10;
    // 当前位置距离顶部距离
    let scrollTop = window.pageYOffset;
    // 计算每次间隔向上滑动多少像素
    let top_pixel = scrollTop / finished_time * interval_time;
    // 通过定时器进行间隔向上滑动
    let timer = setInterval(() => {
        scrollTop -= top_pixel;
        // 为负数,浏览器会不处理得
        window.scrollTo(0, scrollTop);
        if (scrollTop <= 0) {
            clearInterval(timer)
        }
    }, interval_time)
  • 相关阅读:
    List<string>里的集合和字符串互转
    黑马程序员学习9
    黑马程序员学习7
    黑马程序员学习11
    黑马程序员学习10
    黑马程序员学习8
    黑马程序员学习12
    为什么Huffman编码不会发生冲突
    mule esb 配置maven 何苦
    php实现kafka功能开发 何苦
  • 原文地址:https://www.cnblogs.com/zezhou/p/14213806.html
Copyright © 2020-2023  润新知