javascript - Scrolling up and down by a set amount of pixels using jQuery scrollTop -

i have list of links in div overflow. want happen user can navigate in menu of links , down button. want div scroll or down height of 1 link element every time user clicks corresponding button. tried out code can't seem figure out how make scroll right amount in both directions. can me out?

all links have same class.

edit:

i have managed scroll , down. need scroll in little steps of height of 1 link.

$(function() { var ele   = $('#scroller'); var speed = 10, scroll = 5, scrolling;  $('.scroller-btn-up').click(function() {     // scroll element     scrolling = window.setinterval(function() {         ele.scrolltop( ele.scrolltop() - scroll );     }, speed); });  $('.scroller-btn-down').click(function() {     // scroll element down     scrolling = window.setinterval(function() {         ele.scrolltop( ele.scrolltop() + scroll );     }, speed); });  $('.scroller-btn-up, .scroller-btn-down').bind({     click: function(e) {         // prevent default click action         e.preventdefault();     },     mouseleave: function() {         if (scrolling) {             window.clearinterval(scrolling);             scrolling = false;             }         }     }); }); 

that should easy enough using current code, have rid of interval stop scrolling repeatedly. won't need mouseleave function either, can set scroll variable same value of height of link tag e.g. 20 20px high link tag:

$(function() {    var ele = $('#scroller');   var scroll = 20;    $('.scroller-btn-up').click(function() {     // scroll element         ele.scrolltop(ele.scrolltop() - scroll);   });    $('.scroller-btn-down').click(function() {     // scroll element down     ele.scrolltop(ele.scrolltop() + scroll);   });    $('.scroller-btn-up, .scroller-btn-down').bind({     click: function(e) {       // prevent default click action       e.preventdefault();     }   });  });