html - Jquery arrow keys navigation -
i new programming in jquery. want make page scroll down next "container" class everytime press arrow down, , reverse arrow up. have tried googling lot, couldn't seem find manageable solution.
this html code:
<div class="containers"> <div class="boxed" class="container"> <p class="overskrift1">internet kriminalitet</p> <div id="demo"></div> </div> <div class="boxed2" class="container"> </div> </div>
i want arrow keys navigate between different containers.
edit
this best jquery code have far:
$('body').on('keypress'), (function () { var ele = $(this).closest("section").find(".container"); $("body").animate({ scrolltop: $(ele).offset().top }, 100); return false;
});
thank you
- morten
what have is:
put event on body listen keypress
switch key arrow pressed. (37, 38, 39, 40 => left, up, right down).
when key pressed have animate page scrolltop element top.
something like:
var containers = $('.container'); var currentcontainer = containers.get(0); $('body').on('keydown', function (e) { e.preventdefault(); console.log(e.which); switch (e.which) { case 37: // left break; case 38: // currentcontainer = currentcontainer.prev(); break; case 39: // right break; case 40: // down currentcontainer = currentcontainer.next(); break; default: return; // exit handler other keys } $('body').animate({ scrolltop: currentcontainer.getposition().top + 'px' }); });
Comments
Post a Comment