小七来了

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

页面滚动点击返回至顶部,js怎么实现

当页面要滚回顶部时,使用scrollTop属性,设置值为0即可

  • 当页面具有 DOCTYPE,或者说指定了 DOCTYPE 时,使用document.documentElement.scrollTop
  • 当页面不具有 DOCTYPE,或者说没有指定了 DOCTYPE 时,使用document.body.scrollTop
  • 为了兼容各种情况,建议同时使用这两种写法。
  • document.documentElement.scrollTop = 0
    document.body.scrollTop = 0

    实现页面平滑过渡滚回之顶部,但是Safari 明确表示不支持smooth

  • window.scrollTo({
        top: 0,
        behavior: "smooth"
    });

    模仿曲线滑动效果,这里先安装bezier-easing这个库

  • import BezierEasing from "bezier-easing";
    
    const easingFunc = BezierEasing(0.42, 0, 1, 1);
    const scrollTop = easingFunc(0.5)
    复制代码
    function animateSetScrollTop({ target = document.documentElement, start, end, stepNo = 1, stepTotal }: StepOptions) {
        const next = getNextScrollTopValue(start, end, stepNo, stepTotal);
        window.requestAnimationFrame(() => {
            setElementScrollTop({
                target,
                value: next,
            });
            if (stepNo !== stepTotal) {
                const nextStepNo = stepNo + 1;
                animateSetScrollTop({
                    target,
                    start,
                    end,
                    stepNo: nextStepNo,
                    stepTotal,
                });
            }
        });
    }
    复制代码

     

posted on   小七来了  阅读(744)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示