Navigieren durch die Seite mit den Pfeiltasten

Ich möchte es einem Benutzer ermöglichen, mit den Pfeiltasten auf der Tastatur durch meine Seite zu navigieren. Ich möchte, dass sie für jeden Druck in einem Index in den nächsten Abschnitt gelangen können, wenn sie nicht auf ein Eingabefeld fokussiert sind.Navigieren durch die Seite mit den Pfeiltasten

Die Grundstruktur meines Codes ist dies:

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

Quelle

2016-11-16 user3212247

Ich weiß, dass Sie dies mit 'tabindex' tun können, aber nicht mit den Pfeiltasten. Vielleicht eine Verwendung der '' onkeypress''/'' keypressup'' Event Listener? – Crowes

ich ein jsFiddle mit meiner Vision, wie es erreicht werden kann. Ich nehme an, dass Sie jQuery verwenden können. Durch Drücken der Aufwärts- oder Abwärtspfeile wird ein Benutzer zum nächsten oder vorherigen Abschnitt bewegt und mit roten Rahmen hervorgehoben. Code:

$(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); 
}

Quelle

2016-11-16 12:17:20 Vaidas

Sie müssen JavaScript-Code dafür hinzufügen. scheint wie JQuery das richtige Werkzeug für den Job sein kann. Sollte so etwas wie dieses:

$(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(); 
     } 
    } 
    }); 
});

ich working example on plunker für diesen einen hinzuzufügen habe.

Quelle

2016-11-16 12:38:29

Navigieren durch die Seite mit den Pfeiltasten

Antwort

Verwandte Themen