jquery - 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

When you clicked on the scroll-down button the value of $('.tableholder').scrollTop() was 0 and after event occurred it's value changed to 0 + 10 = 10;

Next, if you clicked on the scroll-top button the value of $('.tableholder').scrollTop() will be 10 this time and after event occurred it's value changed to 10 - 10 = 0;

And thats, how it goes down and up.

To make your code, bit faster and better, you can do 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
    });
});

Answer 2

代码从字面上解释了自己。它做了你没想到的事情，还是你期望它做一些不同的事情？如果是这样，请详细说明，以便我们提供更好的解释。

$('.tableholder').scrollTop() + 10= 获取当前 scrollTop 位置，增加 10px

$('.tableholder').scrollTop() - 10= 获取当前 scrollTop 位置，移除 10px

然后 animate 函数将scrollTop值设置为由上述代码确定的新位置。