Question

我被问到一个网站如下实现滚动视口（http://www.beoplay.com/Products/BeoplayA3#at-a-glance），有些网站有可行的解决方案吗？我尝试过很多scrollTo函数，我对这个jaja很疯狂。使用此代码，它会滚动一次到2 div，但随后停止滚动。谢谢你们。这是代码：

<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>

JQuery Viewport Block滚动动画

0 个答案: