1

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

2 回答 2

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();
        });
于 2013-03-12T15:29:12.667 回答
0

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

在初始化中，您只需输入 { showArrows: true; } 并做了。

于 2011-03-25T17:04:02.087 回答