Question

我想允许用户使用键盘上的箭头键浏览我的页面。对于每次按下，我希望它们能够传递到索引中的下一部分，除非专注于输入字段。

我的代码的基本结构是：

  <body>
      <section id="main">
          <!--CONTENT-->
      </section>
      <section id="creation">
          <!--CONTENT-->
      </section>
      <section id="about">
          <!--CONTENT-->
      </section>
      <section id="contact">
          <!--CONTENT-->
      </section>
  </body>


section {
    height: 100vh;
    width: 100%;
    position: relative;
}

Answer 1

我用我的愿景制作了一个jsFiddle如何实现它。我假设你可以使用jQuery。按向上或向下箭头可将用户移动到下一个或上一个部分，并用红色边框突出显示。代码：

$(document).keydown(function (e) {
  var $activeSection = $("section.active"),
    $newActiveSection;
    if (e.which == 38) {
    // Up
        $newActiveSection = $activeSection.prev("section");
    if(!$newActiveSection.length) {
        $newActiveSection = $("section").last();
    }
  } else if (e.which == 40) {
    // Down
    $newActiveSection = $activeSection.next("section");
    if(!$newActiveSection.length) {
        $newActiveSection = $("section").first();
    }
  }
  $activeSection.removeClass("active");
  $newActiveSection.addClass("active");
  scrollToObject($newActiveSection);

  e.preventDefault();
});

function scrollToObject(object) {
    $(window).scrollTop(object.offset().top);
}

Answer 2

您需要为此添加javascript代码。看起来JQuery可以成为这项工作的正确工具。应该是这样的：

addRows

我为此添加了working example on plunker。

使用箭头键浏览页面

2 个答案: