JQuery клавиши со стрелками

Question

Я новичок в программировании в jquery. Я хочу сделать, чтобы страница прокручивалась вниз до следующего класса «контейнера» каждый раз, когда я нажимаю стрелку вниз, и поворачиваю стрелку вверх. Я много пытался проработать, но я не мог найти управляемое решение.

Это мой HTML-код:

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

Я хочу клавиши со стрелками для перемещения между различными контейнерами.

EDIT

Это, вероятно, лучший код JQuery я до сих пор:

$('body').on('keypress'), (function() { 
var ele = $(this).closest("section").find(".container"); 
$("body").animate({ 
scrollTop: $(ele).offset().top 
       }, 100); 
return false; 

});

Спасибо

• Morten

Answer 1

То, что вы должны сделать, это:

• положить событие на теле, которые слушают keypress

• переключатель в чтобы получить стрелку. (37, 38, 39, 40 => влево, вверх, вниз).

• Когда клавиша нажата, вы должны оживить прокрутку страницы на верхнюю часть элемента.

Что-то вроде:

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: 
      // up 
      currentContainer = currentContainer.prev(); 
      break; 

     case 39: 
      // right 
      break; 

     case 40: 
      // down 
      currentContainer = currentContainer.next(); 
      break; 

     default: 
      return; // exit this handler for other keys 
    } 
    $('body').animate({ 
     scrollTop: currentContainer.getPosition().top + 'px' 
    }); 

}); 

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

Answer 2

Добавить этот плагин https://github.com/flesler/jquery.scrollTo

Тогда следующий сценарий,

$(function() { 

    function scroll(direction) { 

     var scroll, i, 
      positions = [], 
      here = $(window).scrollTop(), 
      collection = $('.container'); 

     collection.each(function() { 
      positions.push(parseInt($(this).offset()['top'], 10)); 
     }); 

     for (i = 0; i < positions.length; i++) { 
      if (direction == 'next' && positions[i] > here) { 
       scroll = collection.get(i); 
       break; 
      } 
      if (direction == 'prev' && i > 0 && positions[i] >= here) { 
       scroll = collection.get(i - 1); 
       break; 
      } 
     } 

     if (scroll) { 
      $.scrollTo(scroll, { 
       duration: 600 
      }); 
     } 

     return false; 
    } 

    $("#next,#prev").click(function() { 
     return scroll($(this).attr('id')); 
    }); 

    $(".scrollto").click(function() { 
     $.scrollTo($($(this).attr("href")), { 
      duration: 600 
     }); 
     return false; 
    }); 

}); 

Где T он следующий, и у них есть класс .scrollto.

Вышеупомянутые js позволяют создать фиксированное положение next/prev nav, которое сохраняется и позволяет прокручивать вверх или вниз до ближайшего контейнера.

<div class="toolbar"> 
<a id="next" class="scrollto">Next</a> 
<a id="prev" class="scrollto">Prev</a> 
</div>