页面添加返回顶部按钮

最新推荐文章于 2022-05-01 20:46:39 发布

梦到韩大厨

最新推荐文章于 2022-05-01 20:46:39 发布

阅读量314

点赞数

分类专栏： js 文章标签： css3 css html

原文链接：https://m.wpjam.com/m/pure-code-4-back-2-top/

版权

js 专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/loginbak/css/font.css">
    <link rel="stylesheet" href="/loginbak/css/xadmin.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script src="/newLayui/layui/layui.js"></script>
    <link rel="stylesheet" href="/newLayui/layui/css/layui.css">
    <link rel="stylesheet" href="/newLayui/formSelects-v4.css">
    <style>
        #gotop {
            display: block;
            width: 60px;
            height: 60px;
            position: fixed;
            bottom: 50px;
            right: 40px;
            border-radius: 10px 10px 10px 10px;
            text-decoration: none;
            display: none;
            background-color: #999999;
        }

        #gotop span {
            display: block;
            width: 60px;
            color: #dddddd;
        }

        #gotop span:hover {
            color: #cccccc;
        }

        #gotop span {
            font-size: 40px;
            text-align: center;
            margin-top: 4px;
        }
    </style>
</head>

<body>
    <a id="gotop" href="#">
        <span>▲</span>
    </a>
</body>

<script>
    $(function () {
        $(window).scroll(function () {
            var WindowHeight = ($(window).height());
            var ScrollHeight = $(document).scrollTop();
            if (WindowHeight <= ScrollHeight) {
                $("#gotop").fadeIn(400); //淡出  
            } else {
                $("#gotop").stop().fadeOut(400);
            }
        });
        $("#gotop").click(function () { //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({ scrollTop: "0px" }, 200);
        });
    })
</script>


</body>

</html>