如何使用 Javascript 允许使用键盘快捷键在各部分之间导航？

Question

我希望允许使用键盘上的 j 和 k 键在我的博客上的 post 和之间进行 导航（类似到 Facebook 和 Tumblr 使用的那个）。如果有任何帮助，每个 post 都有自己的 div class。

如何使用 HTML/CSS/Javascript 执行此操作？

我尝试使用 this blog post，但老实说，我什至不知道从哪里开始 Javascript!

Answer 1

我能想到的最好方法是使用 Javascript 和 Html 锚点。

使用 Javascript 来监听特定的键和按下键时的条件。 Html 锚点将用作 javascript 导航的 "beacon"。

首先阅读锚点并了解它们的工作原理。然后尝试创建符合您要求的 javascript 代码并利用锚点。

Answer 2

这是一个让您入门的示例。 FIDDLE

几件事：

由于 JSFiddle 在加载时的工作方式，您需要单击 "blog posts" 之一，使 window 成为焦点。
K移到下一个post,J移到上一个post.
没有错误处理。如果您尝试向上或向下走得太远，它会崩溃并停止工作。我不得不为你留下一些东西做，对吗？ ;-)

.

JQuery

$(document).keydown(function(e) {
        if (e.keyCode == 74)
        {
            $(".current").prev().addClass("current");
            $(".current").eq(1).removeClass("current");
            $('html, body').animate({
                scrollTop: $(".current").offset().top
            }, 250);
        }
        else if (e.keyCode == 75)
        {
            $(".current").next().addClass("current");
            $(".current").eq(0).removeClass("current");
            $('html, body').animate({
                scrollTop: $(".current").offset().top
            }, 250);   
        }
});

如何使用 Javascript 允许使用键盘快捷键在各部分之间导航？

How can I use Javascript to allow navigation between sections using keyboard shortcuts?

html

javascript

css

navigation

jquery