返回顶部案例

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 @   二王戏木  阅读(33)  评论(0)  编辑  收藏  举报
相关博文：
·  常用的元素对象
·  jQuery
·  js vue实现回到顶部动画效果
·  不但要返回顶部，还要返回底部，小改变，实用，?scroll?的js代码，支持IE，FF，chrome[摘自布布分享,tech.bubufx.com]
·  HTML——用jQuery实现一键返回顶部
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手