Question

我想在我的网站中集成键盘导航，但我没有设法。

我想这样做：http://www.demo.pagescroller.com/ 当你按下＆＃34; up＆＃34;或＆＃34; down＆＃34;键盘上的箭头页面在每个部分之间移动。

我的页面结构如下：http://jsfiddle.net/Xroad/Nbwgk/13/

<div id="page">

    <section id="home">HOME SECTION</section>

    <section id="content">
        <article class="layout">ARTICLE 1...</article>
        <article class="layout">ARTICLE 2...</article>
        <article class="layout">ARTICLE 3...</article>
        <article class="layout">ARTICLE 4...</article>
        <article class="layout">ARTICLE 5...</article>
    </section>

</div>

我希望我的页面在每个页面之间移动。

提前感谢您的帮助。

Answer 1

您可以使用Ona Page Scroll： http://www.thepetedesign.com/demos/onepage_scroll_demo.html 它使用起来很简单。

Answer 2

如果每个部分的高度相似，你可以试试这个。

  $(document).on('keydown',function(e){
 e.preventDefault();

 var sectionHeight=700;
 var currentScroll=$(document).scrollTop();       
 currentScroll=currentScroll-(currentScroll%sectionHeight);
 if(e.which==40)
 { 

$('html, body').animate( {
    scrollTop : (currentScroll+sectionHeight)
}, 500);

}
    else    if(e.which==38)
 {

 $('html, body').animate( {
    scrollTop : (currentScroll-sectionHeight)
}, 500);

 }
 });

The updated fiddle

部分之间的键盘滚动

2 个答案: