JS实现回到顶部的滚动效果

最新推荐文章于 2025-02-19 14:30:17 发布

潇授大帝

最新推荐文章于 2025-02-19 14:30:17 发布

阅读量1.1k

点赞数 2

分类专栏： html

本文链接：https://blog.youkuaiyun.com/weixin_39642150/article/details/98483097

版权

html 专栏收录该内容

24 篇文章

订阅专栏

//页面加载完后触发
window.onload = function () {
    var back = document.getElementById("back");
    back.onclick = function () {
        var time = setInterval(function () {
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            if (top === 0) {
                clearInterval(time);
            } else {
                document.documentElement.scrollTop = top - 20;
            }
        }, 1);
    }
};

//jquery写法
$(function () {
    $("#back").click(function () {
        var time = setInterval(function () {
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            if (top === 0) {
                clearInterval(time);
            } else {
                window.scrollTo(0, top - 100);
            }
        }, 10);
    });
});