如何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值到新的位置，如由上面的代碼來確定。