JavaScript实现设置浏览器滚动条回到顶部

最新推荐文章于 2024-06-05 11:15:38 发布

CHY__YHC

最新推荐文章于 2024-06-05 11:15:38 发布

阅读量3.9k

点赞数 1

分类专栏： DOM 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45982960/article/details/118684718

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

要求：在页面右下角有一个div标签，点击div标签浏览器右边滚动条回到顶部

思路：通过设置浏览器卷去高度判断滚动条是否到达顶部。

步骤：

1、对浏览器页面进行简单布局

<style>
* {margin: 0; padding: 0;}
body {height: 1000px; background: #000;}
div {width: 70px; height: 50px; background-color: skyblue; position: fixed; bottom: 50px;
right: 50px;}
</style>
<body>
    <div id="btn">回到顶部</div>
</body>

2、对 div 绑定点击事件

btn.onclick = function () {

}

3、通过设置定时器不断使浏览器卷去高度减少，并判断当卷去高度为 0 时达到顶部，停止定时器。

btn.onclick = function () {         // 对 div 绑定的点击事件
            timer = setInterval(function () {     // 设置定时器
                document.documentElement.scrollTop -= 20    // 使高度每次减少20px
                if (document.documentElement.scrollTop <= 0) {
                    clearInterval(timer)    // 关闭定时器
                }
            }, 50)   // 50毫秒执行一次
        }

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 1000px;
            background: #000;
        }

        div {
            width: 70px;
            height: 50px;
            background-color: skyblue;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>

<body>
    <div id="btn">回到顶部</div>
    <script>
        var timer = 0
        btn.onclick = function () {
            timer = setInterval(function () {
                document.documentElement.scrollTop -= 20
                if (document.documentElement.scrollTop <= 0) {
                    clearInterval(timer)
                }
            }, 50)
        } 
    </script>
</body>

</html>

CHY__YHC

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现设置浏览器滚动条回到顶部

要求：在页面右下角有一个div标签，点击div标签浏览器右边滚动条回到顶部思路：通过设置浏览器卷去高度判断滚动条是否到达顶部。步骤：1、对浏览器页面进行简单布局<style>* {margin: 0; padding: 0;}body {height: 1000px; background: #000;}div {width: 70px; height: 50px; background-color: skyblue; position: fixed; bottom:
复制链接

扫一扫