如何将滚动div移动到其中的特定元素

Question

我有一个可滚动的div，我想对其中的特定元素进行尝试，

var t = 0;
$(document).ready(function() {
  $("button").click(function() {
    var x = $("#good").offset();
    alert("Top: " + x.top + " Left: " + $("#x").offset().top + "height: " + $("#x").height());
    $("#x").scrollTop((x.top - $("#x").offset().top));
  });

  $("#x").scroll(function() {
    $("span").text($("#x").scrollTop());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Try the scrollbar in the div</p>

<div id="x" style="border: 1px solid black; width: 400px; height: 400px; overflow: scroll;">
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div id=good>goo0000000000000000000000000000000d</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
</div>

<button>Return the offset coordinates of the p element</button>

<span></span>

但是问题是，只有当滚动条为0时，它才能很好地工作；当我滚动到任何其他位置并尝试使用它时，它不会滚动到我选择的元素的位置。