Javascript 多次单击后滚动到元素不工作

我有一个导航，想在点击每个

li

scrollTop

到元素顶部后，但是在多次点击

li

后，它不能正常工作，我知道为什么，例如scroll已经是

0

，然后元素顶部是

50

，滚动至

50

，然后如果单击另一个顶部偏移量为150的图元，则滚动至150，但滚动至

200

，因为它现在处于

50

状态。我尝试了两种逻辑：

A.让用户每次单击时滚动到零，但不起作用

$('ul').stop().animate({
    scrollTop: 0 }, 0);

B.减法元素偏移当前滚动位置的顶部，但它也不起作用

var aTop = parseInt($(this).offset().top);
var cTop = parseInt($('ul').scrollTop());
var offset = aTop - cTop;

有什么想法吗

$（'li'）。单击（函数（）{
var offset=$（this）.offset（）.top；
$（'ul'）。设置动画({
滚动顶：偏移量
}, 500);
});
ul{
宽度：200px；
高度：300px；
溢出：滚动；
}
李{
边缘底部：10px；
}


样本1
样本2
样本3
样本4
样本5
样本6
样本7
样本8
样本9
样本10
样本1
样本2
样本3
样本4
样本5
样本6
样本7
样本8
样本9
样本10
您需要添加
ul
元素的滚动条，而不是减去它：

var offset = $(this).offset().top + $(this).parent().scrollTop();

片段：


$（'li'）。单击（函数（）{
var offset=$（this.offset（）.top+$（this.parent（）.scrollTop（）；
$（'ul'）。设置动画({
滚动顶：偏移量
}, 500);
});
ul{
宽度：200px；
高度：300px；
溢出：滚动；
}
李{
边缘底部：10px；
}


样本1
样本2
样本3
样本4
样本5
样本6
样本7
样本8
样本9
样本10
样本1
样本2
样本3
样本4
样本5
样本6
样本7
样本8
样本9
样本10