Добавить навигацию по клавишам со стрелками в jQuery scrollTop - PullRequest
Новая
       12

Добавить навигацию по клавишам со стрелками в jQuery scrollTop

1 голос
/ 25 марта 2011

Я использую jQuery scrollTop для навигации по точкам на странице.Работает отлично.Но мне было интересно, можно ли добавить навигацию клавиш со стрелками вверх / вниз к нему.Так, например, стрелка вниз прокручивает к следующей точке, следующей точке и т. Д. Стрелка вверх возвращает одну точку и т. Д. И т. Д. Любая помощь в этом вопросе очень ценится!*

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;
});

Ответы [ 2 ]

1 голос
/ 12 марта 2013

Что-то вроде этого должно быть тем, что вы ищете.

Можно легко добавить что-то, что определяет, в каком разделе страницы вы находитесь, прежде чем двигаться, если пользователь прокручивает мышью! 

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();
        });
0 голосов
/ 25 марта 2011

Не совсем ответ на ваш вопрос, но jscrollpane имеет встроенную функцию, если вы хотите попробовать использовать ее.

В инициализации вы просто вводите {showArrows: true;} и готово.

...