矢印キーでページ上のオブジェクト間をスムーズにスクロールできますか？

Question

私は、一連の画像をページ上に縦に並べた非常にシンプルなウェブサイトを構築しています。上下の矢印キーを使用して、ある画像から次の画像へのスクロールをスムーズにすることができます。このようにして、ブラウジングに必要なキーストロークの数が最小限に抑えられ、ページダウンとページアップの比類のない間隔を避けることができます。

これはjavascript関数であると想像します。しかし、私は非常にjavascriptを使用して経験していないので、私はあなたが答えの初心者を考えることができることを願っています。現在、画像はdivの中に配置され、br（複数の改行）で区切られています。だから、それぞれimgにidを置くか、またはそれぞれのimgの周囲に識別タグを配置して使用することができると思います。または、おそらく、JavaScriptを矢印キーでスクロールする手順を認識させる別の方法があります。これを行う最善の方法は何ですか？ありがとうございました。

Answer 1

jQueryを知っているなら、これは楽しく簡単です。上/下矢印キーを押すと、デフォルトのスクロール動作が行われません。その後、矢印を押して次の画像または前の画像を探します。最後に、jQueryのアニメーションを使用して要素の上部を表示します。あなたはリストの最後を過ぎる時に何らかのエラーチェックをする必要がありますが、これに基づいて理解できると確信しています。

http://jsfiddle.net/aVvQF/4/

$(window).keydown(function(e) { 
    e.preventDefault(); //prevent default arrow key behavior 

    var targetElement; 
    //down 
    if (e.keyCode == 40) { 
     $targetElement = $('.active').next('img'); 
    } 
    //up 
    else if (e.keyCode == 38) { 
     $targetElement = $('.active').prev('img'); 
    } 
    if (!$targetElement.length) {return;} 
    $('.active').removeClass('active'); 
    $targetElement.addClass('active'); 

    //scroll element into view  
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000); 
});