将 div 位置滚动到内部元素

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 和正文，而不是面板。

顺便说一句，我注意到这个问题可以用这个来回答：jQuery滚动到元素;)

更新：

我现在记得(再次测试后(我把你的改成了.我还从您原来的主要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>