如何使用鍵盤箭頭鍵在HTML元素之間導航

Question

我希望我的網頁允許使用鍵盤上的向左和向右箭頭鍵在文本塊之間導航。 我認為這將需要Jquery。

我已經在Stackoverflow上閱讀了十幾個帖子，這些帖子似乎是在解決這個問題而沒有真正回答...所以請不要將此重復作為一個重復的問題

更新：我只是想使用箭頭鍵在文章（如博客文章）之間滾動。 我想要的只是將頁面滾動到下一個分隔線。

Answer 1

這是我為您制作的JS小提琴： http : //jsfiddle.net/3NAwz/

這段代碼顯示了包含文本的div標簽，該標簽在包裝器中浮動到左側。 然后將其包含在另一個包裝中，該包裝小於整體文本（其中一部分）。

然后使用jQuery使用箭頭鍵在內容上滾動。 如果.not(":animated")部分已在制作動畫，則阻止它制作動畫。 在大約5歲的孩子決定非常耐心之后，使用它只會使它變得更好，而不會造成冗長的排隊。

的HTML

<div class="wrapper">
    <div class="inner">
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam erat vitae nibh convallis quis luctus turpis dignissim. Suspendisse imperdiet interdum consequat. Curabitur erat nisl, gravida et aliquet vitae, faucibus vitae lacus.</div>
        <div class="text">Donec dignissim lorem eu augue tincidunt facilisis. Etiam leo purus, tristique eu tempus gravida, auctor sit amet velit. Quisque mattis, libero ut pharetra luctus, tellus justo viverra elit, sodales scelerisque ipsum magna vel felis.</div>
        <div class="text">Pellentesque ligula mauris, volutpat id molestie posuere, fermentum eu lacus. Donec quis metus nisi, et accumsan massa. Morbi eget augue eget lorem semper cursus sit amet non tortor. Aliquam tempor rhoncus odio sit amet fermentum.</div>
    </div>
</div>​

的CSS

.wrapper {
    width:340px;
    overflow:hidden;
    border:1px #000 solid;
}
.inner {
    width:1020px;
}
.text {
    float:left;
    width:300px;
    padding:20px;
    font-size:14px;
    font-weight:bold;
    font-family:Arial;
}

jQuery的

$(document).ready(function() {
    $(document).keyup(function(event) {
        var key = event.which;
        if(key == 37) { // Left arrow key
            $(".wrapper").not(":animated").animate({ scrollLeft: "-=340px" }, 500);
        }
        if(key == 39) { //Right arrow key
            $(".wrapper").not(":animated").animate({ scrollLeft: "+=340px" }, 500);
        }
    });
});​