Question

I wish to allow navigation between the posts on my blog using the j and k keys on the keyboard (similar to that which Facebook and Tumblr use). Each post has it's own div class if that's any help. How do I go about doing this using HTML/CSS/Javascript? I tried using this blog post but, honestly, I have no clue where to even start with Javascript!

Answer 1

我能想出的最好方法是使用带有Html锚点的Javascript。

使用Javascript来侦听特定键以及按下键时的条件。 Html锚点将被用作＆＃34;信标＆＃34;用于javascript导航。

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

Answer 2

这是一个让你入门的例子。 FIDDLE

有几件事：

由于JSFiddle在加载时的工作方式，你需要点击其中一篇博文＆＃34;这样窗口就会聚焦。
K移至下一篇文章，J移至上一篇文章。
没有错误处理。如果你试图向上或向下走得太远，它会崩溃并停止工作。我不得不为你留下一些东西做吧，对吧？ ; - ）

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

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

2 个答案: