Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >来实现一个js平滑滚动到顶部的小功能

来实现一个js平滑滚动到顶部的小功能

作者头像
马克社区
发布于 2022-07-18 10:10:12
发布于 2022-07-18 10:10:12
1.2K00
代码可运行
举报
文章被收录于专栏:高端IT高端IT
运行总次数:0
代码可运行

需要添加类名 top

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 平滑滚动到顶部
var scrollTopSmooth = function (position) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (cb) {
            return setTimeout(cb, 10);
        };
    }
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var step = function () {
        var distance = position - scrollTop;
        scrollTop = scrollTop + distance / 5;
        if (Math.abs(distance) < 1) {
            window.scrollTo(0, position);
        } else {
            window.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
}
$backToTop = document.querySelector('.top')
$backToTop.addEventListener('click', function () {
    scrollTopSmooth(0);
}, false);

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/120074347

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
LV.0
这个人很懒,什么都没有留下~
加入讨论
的问答专区 >
1先锋会员擅长2个领域
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
    本文部分代码块支持一键运行,欢迎体验
    本文部分代码块支持一键运行,欢迎体验