1

jQuery scrollTop を使用して、ページ上のポイントをナビゲートしています。よく働く。しかし、上下矢印キーのナビゲーションを追加できるかどうか疑問に思っていました。たとえば、下矢印は次のポイント、次のポイントなどにスクロールします。上矢印は 1 ポイント戻るなどです。これに関するヘルプは大歓迎です!

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

Something like this should be what you're looking for.

Could easily add something that determines what section of the page you're on before moving incase the user scrolls with the mouse!

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 に答える