矢印キーでページ間を移動する

ユーザーが自分のキーボードの矢印キーを使用してページをナビゲートできるようにしたい。プレスごとに、入力フィールドに焦点を当てていない限り、インデックスの次のセクションに渡すことができるようにします。矢印キーでページ間を移動する

私のコードの基本的な構造はこれです：

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

出典

2016-11-16 user3212247

私はあなたが 'tabindex'でこれを行うことができますが、矢印キーではできないことを知っています。おそらく、 '' onkeypress''/'' keypressup''イベントリスナーを使うのでしょうか？ – Crowes

私はそれを達成することができる方法を私のビジョンを持って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); 
}

出典

2016-11-16 12:17:20 Vaidas

これにはjavascriptコードを追加する必要があります。 JQueryは仕事のための適切なツールになるようです。

$(function() { 
    var allowKeypressNavigation = true; 
    var $body = $('body'); 
    var $activeSection = $('#main'); 

    //set active section 
    function setPrevSectionActive() { 
    if($activeSection.is(':first-child')) { 
     $activeSection = $activeSection.siblings().last(); 
    } else { 
     $activeSection = $activeSection.prev(); 
    } 
    } 

    function setNextSectionActive() { 
    if($activeSection.is(':last-child')) { 
     $activeSection = $activeSection.siblings().first(); 
    } else { 
     $activeSection = $activeSection.next(); 
    } 
    } 

    //scroll to active section 
    function scrollToActiveSection() { 
    var location = $activeSection.offset().top; 
    $body.scrollTop(location); 
    } 

    //disable keyboard navigation when input in focus 
    $('input').on("focus", function(e){ 
    allowKeypressNavigation = false; 
    }).on("blur", function(e){ 
    allowKeypressNavigation = true; 
    }); 

    //assing event to document 
    $(document).on("keydown", function(e){ 
    if(allowKeypressNavigation) { 
     var keyCode = e.keyCode; 
     if(keyCode==38) { 
     //UP pressed 
     setPrevSectionActive(); 
     scrollToActiveSection(); 
     } else if(keyCode==40) { 
     //DOWN pressed 
     setNextSectionActive(); 
     scrollToActiveSection(); 
     } 
    } 
    }); 
});

私はこれにworking example on plunkerを追加しました。

出典

2016-11-16 12:38:29

矢印キーでページ間を移動する

答えて

関連する問題