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

来源：互联网发布：学完c 还是不会编程编辑：程序博客网时间：2024/05/18 06:49
<!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>
阅读全文
0 0