jquery位置3-60

 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
</head>
 
<body>
    <div class="back">返回顶部
 
    </div>
    <div class="container"></div>
    <script>
        $(function() {
            //被卷起了多少
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                    // console.log(11);
 
                    //$(document).scrollTop();
                    console.log($(document).scrollTop());
                    if ($(document).scrollTop() > boxTop) {
                        $(".back").fadeIn();
                    } else {
                        $(".back").fadeOut();
                    }
                })
                //返回顶部
            $(".back").click(function() {
                //$(document).scrollTop(0);
                $("body,html").stop().animate({
                    scrollTop: 0
                });
            })
        })
    </script>
</body>
 
</html>

运行结果

 

posted @   前端导师歌谣  阅读(16)  评论(0)  编辑  收藏  举报
相关博文：
·  jquery位置2-59
·  jquery位置1
·  使用jQuery实现回到顶部
·  不但要返回顶部，还要返回底部，小改变，实用，?scroll?的js代码，支持IE，FF，chrome[摘自布布分享,tech.bubufx.com]
·  js返回点击事件返回页面顶部
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示