Как scrollTop() работает

Question

Я пытался, как я бы прокручивать вверх или вниз таблицы и этот фрагмент работал

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

Вот скрипка http://jsfiddle.net/thiswolf/45gLR/3/

Какое объяснение может быть дано, чтобы объяснить, почему scrollTop работал таким образом?

Answer 1

Когда вы нажали кнопку scroll-down, значение $('.tableholder').scrollTop() было 0, а после события это значение было изменено на 0 + 10 = 10;

Далее, если вы нажмете на кнопку scroll-top, значение $('.tableholder').scrollTop() будет на этот раз 10, а после возникновения события значение будет изменено на 10 - 10 = 0;

И это, как оно идет вниз и вверх.

Чтобы сделать ваш код, немного быстрее и лучше, вы можете сделать это:

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 
    }); 
}); 

Answer 2

Код буквально объясняет сам. Сделал ли он что-то, чего вы не ожидали, или вы ожидали, что он сделает что-то другое? Если так, уточните, чтобы мы могли дать лучшее объяснение.

$('.tableholder').scrollTop() + 10 = получить текущую позицию scrollTop, добавить 10px

$('.tableholder').scrollTop() - 10 = получить текущую позицию scrollTop, удалить 10px

Тогда функция одушевленные анимируется значение в новое положение scrollTop, как определено выше коде.