使用“j”和“k”键导航到页面部分

时间:2011-09-01 18:55:34

标签: javascript jquery keyboard navigation

我正在尝试找到最简单的代码,无论是独立的还是使用jQuery,这样做:当我在键盘上按 j 时,我被重定向到下面的下一个div,当时我按 k ,我被送回上面的div。如果可以顺利滚动,可以加分。

2 个答案:

答案 0 :(得分: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'} );

答案 1 :(得分:0)

我会用这样的方式用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);
    }
});