向 jQuery scrollTop 添加箭头键导航

Question

我正在使用 jQuery scrollTop 来浏览页面上的点。效果很好。但我想知道是否可以为其添加上/下箭头键导航。例如，向下箭头滚动到下一点、下一点等。向上箭头返回一个点，等等。非常感谢对此的任何帮助！

HTML：

<a class="bookmark" href="#option1">Option 1</a>
<a class="bookmark" href="#option2">Option 2</a>
<a class="bookmark" href="#option3">Option 3</a>

<div id="option1">Stuff</div>
<div id="option2">Stuff</div>
<div id="option3">Stuff</div>

jQuery

$( '.bookmark' ).click(function() {
    var elementClicked = $(this).attr( "href" );
    var destination = $(elementClicked).offset().top;
        $("html:not(:animated),body:not(:animated)")
           .delay( 300 ).animate({ scrollTop: destination-20}, 700 );
    return false;
});

Answer 1

像这样的东西应该就是您正在寻找的。

可以轻松添加一些内容来确定您在移动之前位于页面的哪个部分，以防用户使用鼠标滚动！

var navPoints = [
            '#option1',
            '#option2',
            '#option3',
            '#option4',
            '#option5'
        ];

        var currentPoint = 0;

        var moveToElement = function() {
            var elementTop = $(navPoints[currentPoint]).offset().top;
            $("html:not(:animated),body:not(:animated)").delay( 300 ).animate({ scrollTop: elementTop-20}, 700 );
        }

        $(document).keyup(function(e) {
            switch (e.which) {
                case 38:
                    // Up Arrow
                    if(currentPoint > 0)
                        currentPoint--;
                    break;
                case 40:
                    // Down Arrow
                    if(currentPoint < navPoints.length - 1)
                        currentPoint++;
                    break;
                default:
                    // Some other key
                    return;
            }

            moveToElement();
        });

Answer 2

不完全是您问题的答案，但是 jscrollpane 内置了此功能，如果您想尝试使用它。

在初始化中，您只需输入 { showArrows: true; } 就完成了。