Navigate through Page with Arrow Keys
Question
I want to allow a user to navigate through my page with the arrow keys on their keyboard. For every press, I want them to be able to pass to the next section in an index unless in focused on an input field.
The basic structure of my code is this:
<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;
}
2 answers
solution1
0 2016-11-16 12:17:20
I made a jsFiddle with my vision how it can be achieved. I assume that you can use jQuery. Pressing up or down arrows moves a user to the next or previous section and highlights it with red borders. 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);
}
solution2
0 2016-11-16 12:38:29
You'll need to add javascript code for that. seems like JQuery can be the right tool for the job. Should be something like this:
$(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();
}
}
});
});
I've add a working example on plunker for this one.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.