Javascript 制作垂直滑块

我想创建一个固定高度的垂直菜单，当你按下箭头时，它可以上下滑动

我不知道如何使用偏移来知道跳转到哪里。 现在，我从下一个li项获取相对偏移量，然后跳到那里。但它没有做它应该做的。而且，这是不正确的。我想我必须知道UL的底部是否显示在div中。如果是这样，向下箭头就不必再移动了。但我怎么知道呢

    //get next element
    var offsetNextLi = jQuery($nextElement).position();

    $liScrolledto = $nextElement;

    jQuery("ul#inline_navigation").animate({
        scrollTop: offsetNextLi.top
    }, 500);

这是我的小提琴：

---

偏移是相对的，但您的示例具有恒定的li高度，因此您可以使用恒定的步进。或者计算下一个不可见的外部li元素。要做到这一点，我需要一点时间

这段代码没有经过优化，因此，它只是出于说教的原因。 代码looksup用于每次单击“ul”列表，y变量通过jQuery的scrollTop（）函数获取相对坐标。 例如，步长也可以是常数59，或者像我之前计算的那样

然后检查y是否在顶部或底部打破边界，因此它向下查找高度，并将y与0向上检查。 上下的Rest几乎相同，只是符号从+变为-

---

希望这有帮助。代码可以更好地重用和优化，使用keypress也可以做到这一点。

您好，谢谢您的帮助。快速提问，为什么用函数（$）{}（jQuery）包装代码？这有优化的原因吗？或者只是因为你习惯了$？好的。步长=第一个子项的高度+一些边距。scrollTop=ul中隐藏的所有像素？但是为什么（h>=y）足够好呢？我的意思是，y（隐藏的像素）永远不是全高？它似乎确实有效，但我不完全理解。@acriel我使用函数（$）{…}（jQuery）作为包装，在内部匿名函数中使用$，1。为了方便起见，2。不要污染全局范围（内部的局部变量）@acriel（h>=y）表示底部的边界，您必须知道整个列表的高度（其他方法可以想象，如测量底部arrwow的位置，并将其与当前位置进行比较）。y是列表的当前位置，当您位于列表底部时，该位置与列表的高度相同。您可以查看您的浏览器控制台来检查这些值，以便对其有所了解。非常感谢您的详细说明！这有点令人困惑，因为jQuery文档说：“垂直滚动位置与可滚动区域上方视图中隐藏的像素数相同。如果滚动条位于最顶端，或者元素不可滚动，则该数字将为0。”[。但实际上，（h>=y）可以工作。

(function($) {
$(document).ready(function () {
     //SLIDE UP
    jQuery("#arrowup").on("click", function () {
        var $ul = $('#inline_navigation');
        var y = $ul.scrollTop();
        var $firstChild = $ul.children().first();
        var step = $firstChild.outerHeight() + parseInt($firstChild.css('marginBottom'),10);

        console.log('before up', y, step);
        if (y >= 0) {
            y -= step;
            console.log('after up', y);

            $ul.stop().animate({
                scrollTop: y
            }, 100);
        }
    });

    //SLIDE DOWN
    $("#arrowdown").on("click", function () {
        var $ul = $('#inline_navigation');
        var y = $ul.scrollTop();
        var h = $ul.height();
        var $firstChild = $ul.children().first();
        var step = $firstChild.outerHeight() + parseInt($firstChild.css('marginBottom'),10);

        console.log('before down', y, step);
        if (h >= y) {
            y += step;
            console.log('after down', y);

            $ul.stop().animate({
                scrollTop: y
            }, 100);
        }
    });

});
}(jQuery));