JavaScript中返回顶部按钮(匀速、减速)写法

最新推荐文章于 2022-09-28 21:29:31 发布

原创最新推荐文章于 2022-09-28 21:29:31 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了两种实现网页平滑滚动返回顶部的技术方案：一种是通过数学计算实现减速运动回到顶部，另一种则是采用匀速运动方式。前者适用于大多数场景，后者则相对较少使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.减速运动回到顶部的方法(多数用这个):

var totop = document.getElementbyId("totop");
var target = 0;
totop.onclick = function () {
    clearInterval(timer);
    var timer = setInterval(function () {
        target = document.body.scrollTop;
        target -= Math.ceil(target/10);//做减速运动
        window.scrollTo(0, target);
        if (target == 0) {
            clearInterval(timer);
        }
    }, 10);
};

2.匀速运动到顶部(用的较少)

var totop = document.getElementById('totop');
        var target = 0;
            totop.onclick = function () {
                clearInterval(timer);
                var timer = setInterval(function () {
                //随定时器达到匀速
                    target = document.body.scrollTop -50;
                    window.scrollTo(0, target);
                    if (parseInt(target) < 60) {
                        window.scroll(0, 0);
                        clearInterval(timer);
                    }
                }, 10);
            };