jquery - How does scrollTop() work -

i trying out how scroll or down table , snippet worked

$('.scroll-down').click(function() {      $('.tableholder').animate({         scrolltop: $('.tableholder').scrolltop() + 10     }); });  $('.scroll-top').click(function() {      $('.tableholder').animate({         scrolltop: $('.tableholder').scrolltop() - 10     }); }); 

here fiddle http://jsfiddle.net/thiswolf/45glr/3/

what explanation can given explain why scrolltop worked in way?

when clicked on scroll-down button value of $('.tableholder').scrolltop() 0 , after event occurred it's value changed 0 + 10 = 10;

next, if clicked on scroll-top button value of $('.tableholder').scrolltop() 10 time , after event occurred it's value changed 10 - 10 = 0;

and thats, how goes down , up.

to make code, bit faster , better, can this:

var $tableholder = $('.tableholder'); $('.scroll-down').click(function () {     $tableholder.stop().animate({         scrolltop: $tableholder.scrolltop() + 10     }); }); $('.scroll-top').click(function () {     $tableholder.stop().animate({         scrolltop: $tableholder.scrolltop() - 10     }); });