Question

我已经使用下面的样式表创建了一个DIV元素

#myDiv nav {
position: relative;
display: block;
height: 315px;
overflow: hidden;
margin: 60px 0 0 0;
}

现在有一个UL＆gt; LI元素的列表，它可以是任何高度，我创建了两个按钮UP和DOWN来导航这个＆＃34; #myDiv nav＆＃34;并且jQuery位于

之下

jQuery(document).ready(function(){

    var scrollh  = 0
    var scrollv  = 0

    jQuery(".up_nav").on("click" ,function(){
        scrollv = scrollv + jQuery('#myDiv nav').innerHeight()
        jQuery('#myDiv nav').stop(true, false).animate({
            scrollTop: (jQuery('#myDiv nav').offset().top - scrollv)
        },500);
    });

    jQuery(".down_nav").on("click" ,function(){
        scrollh = scrollh + jQuery('#myDiv nav').innerHeight()
        jQuery('#myDiv nav').stop(true, false).animate({
            scrollTop: scrollh
        },500);
    });
});

问题

UP和DOWN的前几次点击对我来说效果很好，但经过这几次点击后，滚动变为极端向上或极端向下。

我希望这是一个正常的行为，根据居住在＆＃34; #myDiv nav＆＃34;中的UL元素的高度向上和向下滚动。并且只需很小的步骤。

修改

我已将问题的工作版本上传到jsfiddle网站 Link to JSFIDDLE，您几次点击向上或向下按钮后会发现问题。

我理解我的jQuery逻辑有一个缺陷，但我无法理解它。

Answer 1

这将更接近你正在寻找的东西。它是用页面概念实现的。

http://jsfiddle.net/ue94jj60/6/

var Grid = function () {
    var self = this;

    var page = 1,
        nav = null;

    this.init = function () {
        nav = $('#myDiv nav');

        $(".up_nav").on("click", function () {
            self.scroll(page - 1);
        });

        $(".down_nav").on("click", function () {
            self.scroll(page + 1);
        });
    };

    this.pages = function () {
        return Math.round(nav[0].scrollHeight / nav.innerHeight());
    };

    this.scroll = function (p) {
        if (p < 1 || p > this.pages()) {
            return;
        }

        page = p;

        nav.stop(true, false).animate({
            scrollTop: (page - 1) * nav.innerHeight()
        }, 500);
    };

    $(this.init);
};

var grid = new Grid();

您也可以通过编程方式滚动它：

grid.scroll(3);

Answer 2

你可以制作

ul {
  position: absolute;
  top: 0px;
  transition: top 0.5s;
}

接下来只需在点击按钮后更改ul上的顶级样式。

检查示例：

http://jsfiddle.net/DariuszMusielak/oxgbyk6b/1/ ＆lt; ----更新

更新v2 http://jsfiddle.net/DariuszMusielak/jrtfrgo2/

jQuery在div上向上和向下滚动

2 个答案: