Перейдите в раздел страницы с помощью клавиш «j» и «k»

Question

Я пытаюсь найти простейший код, будь то автономный или с jQuery, который делает это: когда я нажимаю j на моей клавиатуре, я перенаправляюсь к следующему разделу ниже и когда я нажмите k , я возвращаюсь в div выше. Дополнительные очки, если он может плавно прокручиваться.

Answer 1

Я думаю, вы захотите использовать комбинацию следующих двух плагинов:

http://plugins.jquery.com/project/hotkeys

и

http://plugins.jquery.com/project/ScrollTo

который вы могли бы использовать таким образом:

$(document).bind('keydown', 'j', whenyoupressj);
$(document).bind('keydown', 'j', whenyoupressk);

, а фактически прокручиваемая часть могла бы быть:

$.scrollTo( '#someid', 800, {easing:'elasout'} );

Answer 2

Я бы сделал это с помощью jQuery следующим образом:

$(document).keydown(function (e) {

    // Handle only [J] and [K]...
    if (e.keyCode < 74 || e.keyCode > 75) {
        return false;
    }

    // Find the "active" container.
    var active = $('div.active').removeClass('active');
    var newActive;

    // Handle [J] event.
    if (e.keyCode == 74) {
        newActive = active.next('div');

        //if (newActive.index() == -1) {
        //    newActive = $('div', container).last();
        //}
    }
    // Handle [K] event.
    else if (e.keyCode == 75) {
        newActive = active.prev('div');

        //if (newActive.index() == -1) {
        //    newActive = $('div', container).first();
        //}
    }

    if (newActive !== undefined) {
        newActive.addClass('active');
        $(document).scrollTop(newActive.position().top);
    }
});