html之置顶菜单-滚动到顶部

最新推荐文章于 2024-09-07 16:56:39 发布

Quincy379

最新推荐文章于 2024-09-07 16:56:39 发布

阅读量1w

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_33733970/article/details/78250728

版权

HTML 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>置顶菜单</title>
    <script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                var nowTop = $(document).scrollTop();
                if (nowTop > 200) {
                    $('.menu').css({
                        position: 'fixed',
                        top: 0,
                        left: '50%',
                        marginLeft: -480
                    });
                    $('.totop').show()
                } else {
                    $('.menu').css({
                        position: 'static',
                        left: 0,
                        margin: '0 auto'
                    });
                    $('.totop').hide()
                }
            });
            $('.totop').click(function(){
                $('html,body').animate({
                    scrollTop: 0
                })
            });

        })

    </script>
    <style type="text/css">
        body {
            margin: 0;
        }

        .logo_bar {
            width: 960px;
            height: 200px;
            background-color: #f0f0f0;
            margin: 0 auto;
        }

        .menu, .menu_pos {
            width: 960px;
            height: 50px;
            margin: 0 auto;
            background-color: gold;
            text-align: center;
            line-height: 50px;
        }

        .menu_pos {
            display: none;
        }

        .down_con {
            width: 960px;
            height: 1800px;
            margin: 0 auto;
        }

        .down_con p {
            margin-top: 100px;
            text-align: center;
        }

        .totop {
            width: 50px;
            height: 50px;
            background: url(./up.jpg) center center no-repeat #000;
            border-radius: 50%;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>

</head>
<body>
<div class="logo_bar">顶部logo</div>
<div class="menu">置顶菜单</div>
<div class="menu_pos"></div>
<div class="down_con">
    <p style="color:red">网站主内容</p>
    <p>网站主内容</p>
    <p>网站主内容</p>
    <p>网站主内容</p>
    <p>网站主内容</p>
</div>
<a href="javascript:" class="totop"></a>
</body>
</html>