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

http://jsfiddle.net/9qhgsysg/1/


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -