当前位置：文江博客话题详情

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

发布于 2024-12-02 13:12:55 字数 127 浏览 2 评论 0原文

我试图找到最简单的代码，无论是独立的还是使用 jQuery，它都是这样做的：当我在键盘上按 j 时，我会被重定向到下面的下一个 div，当我按 < kbd>k，我被送回到上面的div。如果能流畅滚动就加分。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七分※倦醒 2024-12-09 13:12:55

我想你会想要使用以下两个插件的组合：

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

I think you'll want to use a combination of the following two plugins:

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

and

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

which you could use in this kind of fashion:

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

and the actually scrolling part could be:

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

回复收藏 0 原文

哀由 2024-12-09 13:12:55

我会用 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);
    }
});

I would do this with jQuery in a way like this:

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

回复收藏 0 原文

~没有更多了~