jquery - クリックを使用してdiv内でリストアイテムを上下にスクロールするにはどうすればよいですか?

Question

itens の単純なリストを作成し、次または前の矢印をクリックして内部をスクロールさせようとしています。私はプラグインを使用したくありませんでした。それは非常に単純だと思いますが、一度に 3 itens スクロールしたり、高さピクセルだけをスクロールしたりすることはできません。

誰かが私を助けることができますか？

ここでフィドル

Answer 1

追加

.movies-list{display:block;height:620px;overflow:hidden}

そして取り除く

div.section-movies ul { overflow: hidden; height: 2000px; }

次に、いくつかのjQueryを追加します

//get li height
var gh = $('.movies-list li').eq(0).height();
//prev
$('.movie-prev').on('click', function() {
    var cs = $('.movies-list').scrollTop();
    if (cs>gh) {
        cs = cs-gh;
    } else {
        cs = 0;
    }
    $('.movies-list').animate({scrollTop: cs});
});
//next
$('.movie-next').on('click', function() {
    var cs = $('.movies-list').scrollTop();
    cs = cs+gh;
    $('.movies-list').animate({scrollTop: cs});
});

これに似たものが機能するはずですが、gh他のすべての設定方法に応じて の値を微調整する必要がある場合があります。

ここでフィドル：http://jsfiddle.net/filever10/4Gb4x/

Answer 2

Inside

.window-movies { 

add:

max-height:400px;
overflow-y:scroll;

but this simple solution will break your footer. I guess you will need js for that.

EDIT:

$('.movie-next').css({
            position: 'fixed',
            bottom: 0
        });

Add this to your js to keep your footer at the bottom.