Scrollen nach oben und unten um eine bestimmte Anzahl von Pixeln mit jQuery scrollTop

Question

Ich habe eine Liste von Links in einem div mit Überlauf. Was ich möchte, ist, dass der Benutzer in diesem Menü von Links mit einer Hoch-und Runter-Taste navigieren kann. Ich möchte, dass das div bei jedem Klick des Benutzers auf die entsprechende Schaltfläche um die Höhe von 1 Link-Element nach oben oder unten scrollt. Ich habe etwas Code ausprobiert, aber ich kann nicht herausfinden, wie man den richtigen Betrag in beide Richtungen scrollt. Kann mir jemand helfen?

Alle Links haben die gleiche Klasse.

Edit:

ich bereits geschafft haben, um nach oben und nach unten. Jetzt muss ich nur in kleinen Schritten der Höhe von 1 Link scrollen.

$(function() { 
var ele = $('#scroller'); 
var speed = 10, scroll = 5, scrolling; 

$('.scroller-btn-up').click(function() { 
    // Scroll the element up 
    scrolling = window.setInterval(function() { 
     ele.scrollTop(ele.scrollTop() - scroll); 
    }, speed); 
}); 

$('.scroller-btn-down').click(function() { 
    // Scroll the element down 
    scrolling = window.setInterval(function() { 
     ele.scrollTop(ele.scrollTop() + scroll); 
    }, speed); 
}); 

$('.scroller-btn-up, .scroller-btn-down').bind({ 
    click: function(e) { 
     // Prevent the default click action 
     e.preventDefault(); 
    }, 
    mouseleave: function() { 
     if (scrolling) { 
      window.clearInterval(scrolling); 
      scrolling = false; 
      } 
     } 
    }); 
}); 

Answer 1

Das sollte einfach genug sein, mit Ihrem aktuellen Code, alles, was Sie tun müssen, ist das Intervall loszuwerden, um es vom Scrollen wiederholt zu stoppen. Dann brauchen Sie die Funktion mouseleave entweder nicht, Sie können die Bildlaufvariable auf den gleichen Wert der Höhe eines Link-Tags einstellen, z. 20 für einen 20px hohe Link-Tag:

$(function() { 

    var ele = $('#scroller'); 
    var scroll = 20; 

    $('.scroller-btn-up').click(function() { 
    // Scroll the element up  
    ele.scrollTop(ele.scrollTop() - scroll); 
    }); 

    $('.scroller-btn-down').click(function() { 
    // Scroll the element down 
    ele.scrollTop(ele.scrollTop() + scroll); 
    }); 

    $('.scroller-btn-up, .scroller-btn-down').bind({ 
    click: function(e) { 
     // Prevent the default click action 
     e.preventDefault(); 
    } 
    }); 

});