Javascript 滚动到div，防止再次单击

我试着做到以下几点。我创作这把小提琴是为了展示我正在努力实现的目标：

如果用户单击可单击的元素链接“Click 6”，它应该滚动到div.location包装中的元素。这是可行的，但我不明白的是，如果再次单击同一链接，它会卷回顶部

此外，如果我点击click6，它会向下滚动，然后点击“click8”，它会再次向上滚动，但不会滚动到第8分区

有人知道我是如何做到的吗？如果它已经滚动，我再次单击同一个触发器，它应该什么也不做，如果单击另一个触发器，它应该滚动到那个div

$（'.单击_6'）。单击（函数（e）{
$（'.location wrapper'）。设置动画({
scrollTop:（$（“#box_6”）.offset（）.top）
}“慢”）；
});
$（'。单击_8'）。单击（函数（e）{
$（'.location wrapper'）。设置动画({
scrollTop:（$（“#box_8”）.offset（）.top）
}“慢”）；
});
#地图{
宽度：100%；
高度：1000px；
背景色：#000；
}
.位置包装器{
位置：绝对位置；
顶部：20px；
右：0px；
高度：800px；
溢出y：滚动；
}
.定位框{
背景色：#fff；
宽度：315px；
高度：300px；
利润率：0.20px0；
填充：10px；
}

点击6
点击8
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
#12
#13
#14
#15
为您提供了相对于
文档的坐标，因此您必须考虑包装的
scrollTop
值

以下代码不是最佳的，但它会给您一个很好的方向：



顺便说一句，当您需要相对于父对象的顶部（包装器）的坐标时，它更合适

所以这段代码可能更好：

$('.click_6').click(function(e) {
              $('.location-wrapper').animate({
                  scrollTop: ($("#box_6").poition().top +
                              $("#box_6").offsetParent().scrollTop())},
                  'slow');
});

我编辑了你的代码。这里是一个工作演示

var box6 = $("#box_6").offset().top;
var box8 = $("#box_8").offset().top;
$('.click_6').click(function(e) {
              $('.location-wrapper').stop().animate({
                  scrollTop: box6},
                  'slow');
});

$('.click_8').click(function(e) {
              $('.location-wrapper').stop().animate({
                  scrollTop: box8},
                  'slow');
});

我认为它无法在初始化时获取位置框偏移量。top这是一个很好的解决方案，但OP应该注意它对动态内容不起作用，因为偏移量只计算一次。
var box6 = $("#box_6").offset().top;
var box8 = $("#box_8").offset().top;
$('.click_6').click(function(e) {
              $('.location-wrapper').stop().animate({
                  scrollTop: box6},
                  'slow');
});

$('.click_8').click(function(e) {
              $('.location-wrapper').stop().animate({
                  scrollTop: box8},
                  'slow');
});