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

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

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

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

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

Answer 2

当您点击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
    });
});

scrollTop（）如何工作

2 个答案: