返回顶部案例

HTML代码：

<!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>
</head>

<body>
    <div class="main">
        <h1>项目一</h1>
        <h1>项目二</h1>
        <h1>项目三</h1>
        <h1>项目四</h1>
        <h1>项目五</h1>
        <h1 class="box">项目六</h1>
        <h1>项目七</h1>
        <h1>项目八</h1>
        <h1>项目九</h1>
        <h1>项目十</h1>
        <h1>项目十一</h1>
        <h1>项目十二</h1>
        <h1>项目十三</h1>
        <h1>项目十四</h1>
        <h1>项目十五</h1>
        <h1>项目十六</h1>
        <h1>项目十七</h1>
        <h1>项目十八</h1>
        <h1>项目十九</h1>
        <h1>项目二十</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
        <h1>项目二十一</h1>
    </div>
    <div class="goBack"></div>
</body>

</html>

CSS代码：

    <style>
        .main {
            transition: all .3s;
        }
        
        .goBack {
            width: 40px;
            height: 40px;
            background-image: url(img/top.png);
            background-size: 40px 40px;
            position: fixed;
            top: 560px;
            right: 30px;
            display: none;
        }
    </style>

JS代码：

<script>
        var goBack = document.querySelector('.goBack');
        var box = document.querySelector('.box');
        var m = document.querySelector('.main');
        console.log(box.offsetTop);
        console.log(window.pageYOffset);
        window.addEventListener('scroll', function() {
            if (window.pageYOffset >= box.offsetTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
        goBack.addEventListener('click', function() {
                // window.scroll(0, 0);
                animation(window, 0);
            })
            //缓动动画
        function animation(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
                // obj.style.left = window.pageYOffset + step + 'px';

                window.scroll(0, window.pageYOffset + step);
            }, 20)
        }
    </script>

笔记：

　　　　1、offsetTop 是一个只读属性，返回当前元素相对于 offsetParent 节点顶部边界的偏移像素值。

　　　　2、pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

posted @ 2022-02-06 19:57  二王戏木  阅读(48)  评论(0)    收藏  举报