如何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的

然后animate函数动画的scrollTop值到新的位置，如由上面的代码来确定。