原生js回到顶部的实现

最新推荐文章于 2024-04-24 09:22:16 发布

前端小臂猿

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量180

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64337756/article/details/122393085

版权

首先得对js盒子模型的三个系列13个属性掌握

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        span {
            display: block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #fff;
            background-color: orangered;
            border-radius: 50%;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>
</head>

<body style="height: 3000px;background: linear-gradient(red,green,blue);">
    <span>返回顶部</span>
    <script>
        var span = document.querySelector("span");
        var span = document.querySelector("span");
        var winH = document.documentElement.clientHeight;
        window.onscroll = function () {
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(winH + scrollT);
            if (winH + scrollT >= 2500) {
                span.style.display = "block";
            } else {
                span.style.display = "none";
            }
        }
        var timer = null;
        span.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
                scrollT -= 200;
                if (scrollT <= 0) {
                    clearInterval(timer);
                } document.documentElement.scrollTop = document.body.scrollTop = scrollT;
            }, 50);

        }
        // 默认是隐藏的  
        // 首屏的高度  + 滚动条滚动的最大距离 == 页面真实的高度
        var winH = document.documentElement.clientHeight;
        // 滚动事件
        window.onscroll = function () {
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            // 首屏的高度  + 滚动条滚动的距离  >= 2500  展示span
            if (winH + scrollT >= 2500) {
                span.style.display = "block";
            } else {
                span.style.display = "none";
            }
        }
        var timer;
        // 回到顶部
        span.onclick = function () {
            // document.documentElement.scrollTop = 200;
            // 连续赋值
            // document.documentElement.scrollTop = document.body.scrollTop = 300;
            //防止用户多次点击先清除定时器
            clearInterval(timer);
            // 设置定时器
            timer = setInterval(function () {
                // 获取滚动条的距离
                var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
                // 在当前的基础上 减去 一个固定的值
                scrollT -= 200;
                // 清除定时器
                if (scrollT <= 0) {
                    clearInterval(timer);
                }
                // 设置
                document.documentElement.scrollTop = document.body.scrollTop = scrollT;
            }, 50);
        }
    </script>
</body>

</html>

前端小臂猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js回到顶部的实现

首先得对js盒子模型的三个系列13个属性掌握<!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
复制链接

扫一扫