Question

我正在尝试通过网站滚动来解决问题。看看这个 site。向下滚动会导致网站的“隐藏”部分向上滑动。我想达到同样的效果，它也需要平滑滑动。我试过使用scrollTop（）和animate（），但它不起作用。我正在使用JQuery。让我发布我的代码，这里是：

HTML

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
    <link href="stylin.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
         $(function(){
            $(".button").toggle(function(){
                $("#blocks").animate({top: 200}, 500 );
            },
            function(){ 
                $("#blocks").animate({top: 760}, 500 );
            });
        });
    </script>
 <script type="text/javascript">
 $(document).ready( function() {
     $(document).scroll( function() {
     $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );

    });
});
</script>
    </head>
    <body>
    <div id="main">
        <div id="photo">
        </div>
        <div id="blocks">
            <div id="button_block">
                <a href="#" class="button" ><img src="scrollup.png" /></a>
            </div>
        </div>
    </div>
    </body>
</html>

CSS

    #main {
    width: 1500px; 
    position:absolute;

}

#photo{
    position:fixed;
    top:0;
    width:1500px;
    height:780px;
    background-color:blue;
    z-index:0;

}

#blocks{
    position:absolute;
    top: 760px;
    width: 100%;
    height: 1000px;
    background-color: red;
    z-index:1;
}

#button_block{
    position:absolute;
    width:100%;
    height:64px;
    top:-32px;
}

.button
{
    display:block;
    position: absolute;
    right: 686px;
}

Div 块应该是滚动时向上滑动的那个。

看看这部分：

<script type="text/javascript">
     $(document).ready( function() {
         $(document).scroll( function() {
         $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );

        });
    });
    </script>

Answer 1

#main {
    width: 1500px; 
    position:absolute;

}

#photo{
    position:fixed;
    top:0;
    width:1500px;
    height:780px;
    background-color:blue;
    z-index:0;

}

#blocks{
    position:absolute;
    top: 760px;
    width: 100%;
    height: 1000px;
    background-color: red;
    z-index:1;
}

#button_block{
    position:absolute;
    width:100%;
    height:64px;
    top:-32px;
}

.button
{
    display:block;
    position: absolute;
    right: 686px;
}

#scroll_to_top{
   display:none;
   position:fixed;
   bottom:15px;
   right:20px;
   opacity:0.8;
   z-index:9999;
}
#scroll_to_top:hover{
   opacity:1;
}

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
    <link href="stylin.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
         $(function(){
            $(".button").toggle(function(){
                $("#blocks").animate({top: 200}, 500 );
            },
            function(){ 
                $("#blocks").animate({top: 760}, 500 );
            });
        });
    </script>

    <script type="text/javascript">
        $(function(){
            var stt_is_shown = false;
            $(window).scroll(function(){
            var win_height = 300;
            var scroll_top = $(document).scrollTop(); 
            if (scroll_top > win_height && !stt_is_shown) {
                stt_is_shown = true;
                $("#scroll_to_top").fadeIn();
            } else if (scroll_top < win_height && stt_is_shown) {
                        stt_is_shown = false;
                        $("#scroll_to_top").fadeOut();
                        }else if{
                           <script type="text/javascript">
 $(document).ready( function() {
     $(document).scroll( function() {
     $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
}
    });
});
</script>
            });
            $("#scroll_to_top").click(function(e){
                e.preventDefault();
                $('html, body').animate({scrollTop:0}, 1000);
            });
        });
 </script>
 <script type="text/javascript">
 $(document).ready( function() {
     $(document).scroll( function() {
     $("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );

    });
});
</script>
    </head>
    <body>
    <div id="main">
        <div id="photo">
        </div>
        <div id="blocks">
            <div id="button_block">
                <a href="#" class="button" ><img src="scrollup.png" /></a>
            </div>
        </div>
    </div>
    <a href="#" id="scroll_to_top"><img src="scrollup.png" /></a>
    </body>
</html>

我更改了if else语句并添加了一个新的尝试！

滚动div问题

1 个答案: