js实现页面滚动返回顶部

我会带着你远行 2023-03-03 13:25 18阅读 0赞

### 许多网站的右下角都有一个可以使页面返回顶部的按钮 ###

### 例如这些网站： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljeDYwcnp2dmJq_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljeDYwcnp2dmJq_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljeDYwcnp2dmJq_size_16_color_FFFFFF_t_70 2]

##### 返回顶部我们可以用锚点链接来实现，但是锚点链接它突然闪到页面顶部有点不太好看 #####

##### 如果页面是滚动着回到顶部的话会好看很多 #####

##### 那么，开始今天的正题 #####

**\#前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码在后面**

### 先搞几个盒子和一个用来添加点击事件的按钮 ###

### 再随便搞一点样式 ###

* { 
        padding: 0px;
        margin: 0px;
    }
    div { 
        width: 1200px;
        height: 300px;
        margin: 50px auto;
        font-size: 120px;
        line-height: 300px;
        text-align: center;
        color: #ffffff;
        background-color: #999999;
    }
    button { 
        position: fixed;
        bottom: 40px;
        right: 40px;
        width: 60px;
        height: 60px;
        border: 0px;
        border-radius: 10px;
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        color: #000;
        background-color: #c5e4ff;
        outline: none;
        cursor: pointer;
    }
    button:hover { 
        color: #fff;
        background-color: #5fb4ff;
    }

###### 大概长这样： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljeDYwcnp2dmJq_size_16_color_FFFFFF_t_70 3]

# 然后开始js部分 #

### 首先要获取按钮元素 ###

var btn = document.querySelector('button');
    var timer;

###### 然后如果要页面滚动着回到顶部的话我们需要一个计时器让页面每次向上移动一点，然后每秒多移动几次，这样就有滚动着回到顶部的效果了，然后回到顶部之后我们需要让计时器停下，所以我们需要事先准备一个储存计时器的对象（上面的timer） ######

### 给按钮添加点击事件 ###

btn.addEventListener('click', function () { 
        clearInterval(timer);
        timer = setInterval(function () { 
            if (window.pageYOffset != 0) { 
                window.scroll(0, Math.max(window.pageYOffset - 50, 0));
            } else { 
                clearInterval(timer);
            }
        }, 10);
    })

考虑到可能会有**连续点击**的情况，可能会有点击的时候页面还因为**上次点击**的**没滚动完**(上次的计时器还没停止)，所以每次**点击的时候**先**停止**一下**上次的计时器**，然后**再添加新的计时器**

###### 计时器执行的函数也很简单 ######

###### 每次先判断一下页面是否已经滚动到顶部，即页面相对顶部滚动的距离（[window.pageYOffset][]）是否为0，如果是就停止计时器，如果不是就继续滚动，每次滚动就是让页面相对顶部的距离变小一些(用[window.scroll()][window.scroll]设置页面相对顶部的距离)，如果变之后比0还小就变到0 ######

###### 这次的运行效果就不演示了，录gif图有点麻烦，大家自己试吧 ######

### 完整带注释的代码如下： ###

<!DOCTYPE html>
    <html lang="ch-ZN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js实现页面滚动返回顶部</title>
        <style> * { padding: 0px; margin: 0px; } div { width: 1200px; height: 300px; margin: 50px auto; font-size: 120px; line-height: 300px; text-align: center; color: #ffffff; background-color: #999999; } button { position: fixed; bottom: 40px; right: 40px; width: 60px; height: 60px; border: 0px; border-radius: 10px; font-size: 24px; line-height: 30px; text-align: center; color: #000; background-color: #c5e4ff; outline: none; cursor: pointer; } button:hover { color: #fff; background-color: #5fb4ff; } </style>
    </head>
    
    <body>
        <div>模块1</div>
        <div>模块2</div>
        <div>模块3</div>
        <div>模块4</div>
        <div>模块5</div>
        <div>模块6</div>
        <div>模块7</div>
        <div>模块8</div>
        <div>模块9</div>
        <button>返回顶部</button>
        <script> var btn = document.querySelector('button'); // 获取元素 var timer; // 用来储存计时器的变量 btn.addEventListener('click', function () { clearInterval(timer); // 先停止上次的计时器（防止连点） timer = setInterval(function () { // 判断是否已经滚动到了顶部 if (window.pageYOffset != 0) { // 如果没到顶部就再移动一点距离（我这里是一次移动了50像素） window.scroll(0, Math.max(window.pageYOffset - 50, 0)); } else { // 如果到顶部了就停止计时器 clearInterval(timer); } }, 10); }) </script>
    </body>
    
    </html>

##### 以上 #####

ヾ(≧∪≦\*)ノ〃

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljeDYwcnp2dmJq_size_16_color_FFFFFF_t_70]: /images/20230208/a3a5cf0cbb85478db14034c5e3b64452.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljeDYwcnp2dmJq_size_16_color_FFFFFF_t_70 1]: /images/20230208/cc3a411b99904772b65d32e4af04ca9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljeDYwcnp2dmJq_size_16_color_FFFFFF_t_70 2]: /images/20230208/a6bbda3152a749d3a67d6a5bb904705e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ljeDYwcnp2dmJq_size_16_color_FFFFFF_t_70 3]: /images/20230208/06df12dedf2b430e90a32ac38abff21e.png
[window.pageYOffset]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/pageYOffset
[window.scroll]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scroll