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;完成了。

将箭头键导航添加到jQuery scrollTop

2 个答案: