jquery - 如何使用单击在 div 内上下滚动列表项？

Question

我正在尝试构建一个简单的项目列表，并通过单击下一个或上一个箭头使它们在内部滚动。我不想使用任何插件，因为我认为这很简单，但我无法让它们一次滚动 3 个项目或仅滚动高度像素。

有人可以帮助我吗？

在这里提琴

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

里面

.window-movies { 

添加：

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

但是这个简单的解决方案会破坏你的页脚。我猜你需要js。

编辑：

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

将此添加到您的 js 中以将页脚保持在底部。