jQuery 在 div 上上下滚动

Question

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

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

现在有一个 UL>LI 元素列表，可以是任何高度，我创建了两个按钮 UP 和 DOWN 来导航这个“#myDiv nav”，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 对我来说效果很好，但在这几次点击之后，滚动变得极端向上或极端向下。

我希望这是一种正常行为，根据驻留在“#myDiv nav”中的 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);