置顶菜单-滚动到顶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>置顶菜单</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $(window).scroll(function() {
                
                var nowTop = $(document).scrollTop();

                if(nowTop>200){
                    $('.menu').css({
                        position:'fixed',
                        left:'50%',
                        top:0,
                        marginLeft:-480
                    });

                    $('.menu_pos').show();
                }
                else{
                    $('.menu').css({
                        position:'static',                        
                        marginLeft:'auto'
                    });
                    $('.menu_pos').hide();
                }


              if(nowTop>400){
                   $('.totop').fadeIn();
              }
              else{
                  $('.totop').fadeOut();
              }



            });


            $('.totop').click(function() {
                
                $('html,body').animate({'scrollTop':0});

            });




        })




    </script>
    <style type="text/css">
        body{margin:0px;}
        .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(images/up.png) 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>
效果图：
置顶菜单-滚动到顶

猜你喜欢
