2

次のようにスクロール ビューポートを実装する Web サイトを求められました (http://www.beoplay.com/Products/BeoplayA3#at-a-glance)。私は多くの scrollTo 関数を試しましたが、この jaja に夢中になっています。このコードでは、2 div まで 1 回スクロールしますが、その後スクロールを停止します。皆さん、ありがとうございました。これはコードです：

<html>
<head>
    <style>
        div { 
            color:blue; 
        }
        p { 
            color:green; 
        }
        .div_height {
            height: 1000px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id = "1" class="div_height"><h1>First</h1></div>
    <div id = "2" class="div_height"><h1>Second</h1></div>
    <div id = "5" class="div_height"><h1>Third</h1></div>



    <script>
        var lastScrollTop = 0;
        var lastId = 1;
        var complete = 1;

        $(window).scroll(function(event){

            var st = $(this).scrollTop();
            if(complete >0){
                complete = 0;
                if (st > lastScrollTop){
                    // down

                    if (lastId != 3 ){
                        $('html, body').animate({scrollTop: $('#'+(lastId+=1)).offset().top}, 1000/*, function (){ alert('finish down'); complete=1;}*/);
                    };

                } else {
                    // up
                    if (lastId != 1 ){
                        $('html, body').animate({scrollTop: $('#'+(lastId-=1)).offset().top}, 1000/*, function (){ alert('finish up'); complete=1;}*/);
                    };
                };
                complete = 1;
                lastScrollTop = st;
            }
        });
    </script>

</body>

4

0 に答える 0