Question

我有一个div框，里面有不同的元素，我想从索引移到每个元素，但是我的代码只能在第一次使用...

这是一个样本

$(document).on("click", ".goto", function(e) {
  var id = $(this).data('id');

  $('#panel').animate({
    scrollTop: $("#item_" + id).offset().top - 100
  }, 1000, 'swing');
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div style="width: 500px; height:500px; border:1px solid #eee; display:flex">
  <div style="width:100%; overflow-y:auto;" id="panel">

    <a href="#" id="item_a" style="margin:500px 0; display:block;">item1</a>
    <a href="#" id="item_b" style="margin:500px 0; display:block;">item2</a>
    <a href="#" id="item_c" style="margin:500px 0; display:block;">item3</a>

  </div>
</div>

<a href="#" class="goto" data-id="a">go to item1</a>
<a href="#" class="goto" data-id="b">go to item2</a>
<a href="#" class="goto" data-id="c">go to item3</a>

Answer 1

尝试这样做：

 $('html, body').animate({
    scrollTop: $("#item_"+id).offset().top - 100
 }, 1000, 'swing');

因为要设置动画的是html和body，而不是面板。

顺便说一句，我注意到可以使用以下命令回答这个问题：jQuery scroll to element;）

更新：

我现在记得（再次测试之后）我将您更改为。我还从您的原始主要div中删除了一些样式。如果您无法像这样运行它，请告诉我，我们可以尝试另一件事。

$(document).on("click", ".goto", function(e) {
  var id = $(this).data('id');

  $('html, body').animate({
    scrollTop: $("#item_" + id).offset().top - 100
  }, 1000, 'swing');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="panel">

    <div id="item_a" style="margin:500px 0; display:block;">item1</div>
    <div id="item_b" style="margin:500px 0; display:block;">item2</div>
    <div id="item_c" style="margin:500px 0; display:block;">item3</div>

  </div>
</div>

<a href="#" class="goto" data-id="a">go to item1</a>
<a href="#" class="goto" data-id="b">go to item2</a>
<a href="#" class="goto" data-id="c">go to item3</a>

将div位置滚动到元素内部

1 个答案: