js原生实现回到顶部

最新推荐文章于 2023-09-04 21:11:45 发布

V。on

最新推荐文章于 2023-09-04 21:11:45 发布

阅读量191

点赞数

分类专栏： js基础文章标签： js

本文链接：https://blog.csdn.net/qq_40864647/article/details/119570713

版权

js基础专栏收录该内容

24 篇文章 1 订阅

订阅专栏

js原生实现回到顶部

以下为简易版的回到顶部功能，可以自己加图标修改样式等。

<body style="height: 10000px;">
	<div id="goTop"></div>
</body>

#goTop {
    width: 30px;
    height: 30px;
    background: red;
    position: fixed;
    right: 50px;
    bottom: 50px;
}

var timer = null
document.querySelector("#goTop").onclick = () => {
    clearInterval(timer)
    var start = document.documentElement.scrollTop
    var end = 0
    timer = setInterval(() => {
        // 让start减20px,可以根据自己的情况而定
        start -= 20
        document.documentElement.scrollTop = start
        if(start <= end) clearInterval(timer)
    }, 30)
}

V。on

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原生实现回到顶部

js原生实现回到顶部以下为简易版的回到顶部功能，可以自己加图标修改样式等。<body style="height: 10000px;"> <div id="goTop"></div></body>#goTop { width: 30px; height: 30px; background: red; position: fixed; right: 50px; bottom: 50px;}var
复制链接

扫一扫