js实现页面滚动返回顶部

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

例如这些网站:

js实现页面滚动返回顶部_第1张图片
js实现页面滚动返回顶部_第2张图片
js实现页面滚动返回顶部_第3张图片

返回顶部我们可以用锚点链接来实现,但是锚点链接它突然闪到页面顶部有点不太好看
如果页面是滚动着回到顶部的话会好看很多
那么,开始今天的正题

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

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

<div>模块1div>
<div>模块2div>
<div>模块3div>
<div>模块4div>
<div>模块5div>
<div>模块6div>
<div>模块7div>
<div>模块8div>
<div>模块9div>
<button>返回顶部button>

再随便搞一点样式

* {
    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;
}
大概长这样:

js实现页面滚动返回顶部_第4张图片

然后开始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()设置页面相对顶部的距离),如果变之后比0还小就变到0


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

完整带注释的代码如下:


<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>模块1div>
    <div>模块2div>
    <div>模块3div>
    <div>模块4div>
    <div>模块5div>
    <div>模块6div>
    <div>模块7div>
    <div>模块8div>
    <div>模块9div>
    <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>
以上

ヾ(≧∪≦*)ノ〃

你可能感兴趣的:(js实现页面滚动返回顶部)