Mit den Pfeiltasten mit jQuery scrollTo

Question

Ich habe erfolgreich die scrollTo jQuery-Plugin, das Rollen auf die nächste div mit der Klasse „neuen“ implementiert, wenn ein Link angeklickt wird. Allerdings würde ich auch wie die Pfeiltasten zu verwenden, um der Lage sein, um nach oben und unten zu den nächsten / vorherigen divs der gleichen Klasse.

Ich habe alle über das Internet gesucht, aber nicht imstande gewesen, um herauszufinden, wie dies zu tun. Ich bin sehr neu zu JS so sehr einfache Anweisungen würden geschätzt!

Hier ist der relevante Code:

<script type="text/javascript">
jQuery(function($){

 $('<div id="next_arrow"></div>') 
  .prependTo("body") //append the Next arrow div to the bottom of the document
  .click(function(){ 
   scrollTop = $(window).scrollTop();
   $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
     $.scrollTo(h2, 800); // scroll to in .8 of a second
     return false; // exit function
    }
   });
  });

});
</script>

Was muß ich diese hinzufügen, um die Pfeiltaste Arbeit machen?

Danke, Ted

Answer 1

Sie können den keydown Ereignis-Listener verwenden, um Tastenanschläge zu hören. Sie können dies auf <input> Felder verwenden und dergleichen. Da keydown Ereignisse Blase den DOM , können Sie es auf dem document-Objekt verwenden, jeden Tastendruck auf dem fangen Seite:

$(function () {
  $(document).keydown(function (evt) {
    alert("Key pressed: " + evt.keyCode);
  });
});

hat jeder Tastendruck einen Code. Wenn Sie den Code oben in Ihrer Webseite verwenden, werden Sie sehen, dass der Schlüsselcode für den Pfeil nach unten ist 40. Sie können Solo dies eine if oder switch Anweisung in der Prozedur aus mit:

jQuery(function () {

  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      alert("You pressed down.");
    }
  });

});

Jetzt müssen Sie binden in dem Code, der tatsächlich auf die nächste Position springt. Ich empfehle den Code aus in eine Funktion abstrahiert, so dass Sie es für beide Tastenanschläge und Mausklicks können. Hier ist die Funktion, zusammen mit einer Variante des ursprünglichen Code, verwendet es:

// Here is the function:

function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
      $.scrollTo(h2, 800); // scroll to in .8 of a second
      return false; // exit function
    }
  });
}

// Here is your original code, modified to use the function:

jQuery(function () {

  $("#next").click(scrollToNew);

});

Schließlich können Sie im keypress Code hinzufügen und die Funktion von dort aus aufrufen:

function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
      $.scrollTo(h2, 800); // scroll to in .8 of a second
      return false; // exit function
    }
  });
}

jQuery(function () {

  $("#next").click(scrollToNew);

  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      evt.preventDefault(); // prevents the usual scrolling behaviour
      scrollToNew(); // scroll to the next new heading instead
    }
  });

});

Update: nach oben scrollen, zwei Dinge tun. Ändern Sie den keydown Handler:

  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      evt.preventDefault(); // prevents the usual scrolling behaviour
      scrollToNew(); // scroll to the next new heading instead
    } else if (evt.keyCode == 38) { // up arrow
      evt.preventDefault();
      scrollToLast();
    }
  }

und schreiben Sie eine scrollToLast() Funktion von scrollToNew() beruhte, die die letzten neue Rubrik findet, die nicht auf der Seite lautet:

function scrollToLast () {
  scrollTop = $(window).scrollTop();

  var scrollToThis = null;

  // Find the last element with class 'new' that isn't on-screen:
  $('.new').each(function(i, h2) {
    h2top = $(h2).offset().top;
    if (scrollTop > h2top) {
      // This one's not on-screen - make a note and keep going:
      scrollToThis = h2;
    } else {
      // This one's on-screen - the last one is the one we want:
      return false;
    }
  });

  // If we found an element in the loop above, scroll to it:
  if(scrollToThis != null) {
    $.scrollTo(scrollToThis, 800);
  }
}

Answer 2

Nur für mehr Ideen geben, die Arbeit mit Arrays.

var panel_arr = new Array();
$(document).ready(function(e) {

    $('.parallax-panel-wrapper').each(function(i, element){ 
        panel_arr.push( $(this).attr("id") );
    });

    var current_parallax_panel_no   = 0;
    $(document).keydown(function (evt) {
        if (evt.keyCode == 40) { // down arrow
            evt.preventDefault(); // prevents the usual scrolling behaviour
            if(current_parallax_panel_no < (panel_arr.length-1)) current_parallax_panel_no++;
            scrollByArrowKeys(1);               
        } else if (evt.keyCode == 38) { // up arrow
            evt.preventDefault(); // prevents the usual scrolling behaviour
            if(current_parallax_panel_no >= 1) current_parallax_panel_no--;
            scrollByArrowKeys(0); 
        }
    });

    function scrollByArrowKeys(add_more){
        scrollToThis = (($("#" + panel_arr[current_parallax_panel_no]).offset().top)  + add_more ; // get element top
        $.scrollTo(scrollToThis, 800);      
    }

});

Answer 3

Sie müssen das Tastendruck-Ereignis erfassen und entscheiden, welche keycode gedrückt wurde

$(document).keypress(function(e) {
    switch(e.keyCode) { 
        case 37:
            //left arrow pressed
        break;
        case 39:
            //right arrow pressed
        break;
    }
});