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，如下所示：

dateAndTime()

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

我建议使用.attr（）获取单击任何标题的ID，然后将标题ID解析为一个数字。然后，您可以使用该数字提供要滚动到的所需元素/配件块的ID。

Answer 2

您试图将site-accordion元素放置在单击的手风琴的顶部。您应该像这样将文档主体放置到手风琴元素上：

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

检查此更新的JS Fiddle

请原谅我有拼写错误，并通过移动设备回复。

CSS滚动条内的ScrollTop（溢出-y：自动）

2 个答案: