Question

我尝试执行以下操作。我创造了这个小提琴来展示我想要实现的目标：

如果用户点击可点击的元素链接“Click 6”，它应该滚动到div .location-wrapper中的元素。这有效，但我不明白的是，如果再次点击相同的链接，它会滚动到顶部。

此外，如果我点击了click6并向下滚动，然后我点击“click8”它会再次向上滚动，但不会向下滚动数字8。

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

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

#map {
  width: 100%;
  height: 1000px;
  background-color: #000;
}
.location-wrapper {
  position: absolute;
  top: 20px;
  right: 0px;
  height: 800px;
  overflow-y: scroll;
}
.location-box {
  background-color: #fff;
  width: 315px;
  height: 300px;
  margin: 0 0 20px 0;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click_6">click6</div>
<div class="click_8">click8</div>
<div id="map">
</div>

<div class="location-wrapper">
  <div class="location-box" id="box_1">#1</div>
  <div class="location-box" id="box_2">#2</div>
  <div class="location-box" id="box_3">#3</div>
  <div class="location-box" id="box_4">#4</div>
  <div class="location-box" id="box_5">#5</div>
  <div class="location-box" id="box_6">#6</div>
  <div class="location-box" id="box_7">#7</div>
  <div class="location-box" id="box_8">#8</div>
  <div class="location-box" id="box_9">#9</div>
  <div class="location-box" id="box_10">#10</div>
  <div class="location-box" id="box_11">#11</div>
  <div class="location-box" id="box_12">#12</div>
  <div class="location-box" id="box_13">#13</div>
  <div class="location-box" id="box_14">#14</div>
  <div class="location-box" id="box_15">#15</div>
</div>

感谢您的帮助！

Answer 1

.offset()为您提供了相对于document的坐标，因此您必须考虑包装器的scrollTop值。

以下代码不是最佳代码，但它会为您提供一个好方向：

jsFiddle

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

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

BTW，.position()更适合需要相对于父级顶部（包装器）的坐标。

所以这段代码可能更好：

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

Answer 2

我编辑了你的代码。 https://jsfiddle.net/c4xcb98w/4/这是一个有效的演示。

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');
});

我认为它无法在初始化

上获得location_box offset.top

滚动到div，防止第二次点击

2 个答案: