向 jQuery scrollTop 添加箭头键导航答案

【问题标题】：Add arrow key navigation to jQuery scrollTop向 jQuery scrollTop 添加箭头键导航
【发布时间】：2011-03-25 16:56:31
【问题描述】：

我正在使用 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;
});

【问题讨论】：

标签： jquery scrolltop arrow-keys

【解决方案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();
        });

【讨论】：

【解决方案2】：

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

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

【讨论】：