ScrollTop里面的css滚动条（overflow-y：auto）

Question

我正在研究这种手风琴。在这里，您可以看到滚动条内的手风琴列表。在这里，每当我们点击标题时，它应该滚动到顶部，以便正确显示标题和文本。我尝试了很多东西，但它不在滚动条内部工作。虽然代码完全在我们没有滚动条的地方之外。这是我创造的小提琴。希望有人帮忙。

https://jsfiddle.net/t2fpeq0d/

$('.accordion-block-heading').on('click', function() {
  var $this = $(this);
  var $parent = $this.parent();
  var $position = $this.position().top;
  console.log($position);
  $this.next().stop().slideToggle();

  $('.site-accordion').animate({
    scrollTop: $this.offset().top
  }, 2000);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML-


<!-- Site Accordion -->
<ol class="site-accordion mt-30">
  <!-- Accordion Block -->
  <li class="accordion-block">
    <h3 class="accordion-block-heading">Title question goes here lorem ipsum dolor?</h3>
    <p class="accordion-block-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </li>
  <!-- Accordion Block -->
  <!-- Accordion Block -->
  <li class="accordion-block`enter code here`">
    <h3 class="accordion-block-heading">Title question goes here lorem ipsum dolor?</h3>
    <p class="accordion-block-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </li>
  <!-- Accordion Block -->
  <!-- Accordion Block -->
  <li class="accordion-block" id="test">
    <h3 class="accordion-block-heading">Title question goes here lorem ipsum dolor?</h3>
    <p class="accordion-block-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </li>
  <!-- Accordion Block -->
  <!-- Accordion Block -->
  <li class="accordion-block">
    <h3 class="accordion-block-heading">Title question goes here lorem ipsum dolor?</h3>
    <p class="accordion-block-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </li>
  <!-- Accordion Block -->
  <!-- Accordion Block -->
  <li class="accordion-block">
    <h3 class="accordion-block-heading">Title question goes here lorem ipsum dolor?</h3>
    <p class="accordion-block-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </li>
  <!-- Accordion Block -->
  <!-- Accordion Block -->
  <li class="accordion-block">
    <h3 class="accordion-block-heading">Title question goes here lorem ipsum dolor?</h3>
    <p class="accordion-block-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </li>
  <!-- Accordion Block -->
  <!-- Accordion Block -->
  <li class="accordion-block last-block" style="padding-bottom: 0">
    <h3 class="accordion-block-heading">Title question goes here lorem ipsum dolor?</h3>
    <p class="accordion-block-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </li>
  <!-- Accordion Block -->
</ol>
<!-- Site Accordion -->

Answer 1

您可以使用Position，如下所示：

$("body, html").animate({
    scrollTop: $("#accordian-block-1").position().top
});

显然，您需要为每个元素添加唯一ID。

我建议使用.attr（）来获取所点击的任何标题的ID，然后将标题ID解析为数字。然后，您可以使用此数字提供要滚动到的所需元素/手风琴块的ID。

Answer 2

您正试图将site-accordion元素定位到点击的手风琴顶部。您应该将文档正文放置到accordion元素，如下所示：

$([document.documentElement, document.body]).animate({
    scrollTop: $position
}, 2000);

检查这个更新的JS Fiddle

请原谅我的任何法术错误，从我的移动设备回复。