Раскрытие аккордеона и переход к разделу после раскрытия

Question

У меня есть раздел комментариев и форма обзора внизу раздела комментариев. У меня есть весь раздел комментариев, завернутый в Bootstrap Accordion с классом Collapse:

CODEPEN:

Посмотрите демонстрацию. Обратите внимание, что нажатие на ссылку «оставить отзыв» расширяет review_form, но не доходит до. Рабочий код

Я пробовал onClick="window.scrollTo(#review_form)", но это не сработало.

Basi c HTML:

<div class="review-collapse">
  <button class="woocommerce button review-button" data-toggle="collapse" data-target="#commentList" aria-expanded="false" aria-controls="commentList">SHOW ALL REVIEWS'</button>
</div>

<div class="collapse" id="commentList">
  
  <div class="leave-review">
    <a data-toggle="collapse" data-target="#review_form_wrapper" aria-expanded="false" aria-controls="review_form_wrapper" onClick="window.scrollTo(#review_form)">Leave a review?></a>
  </div>

    <ol class="commentList">
      //Comments here
    </ol>

<div id="review_form_wrapper" class="collapse">
  <div id="review_form">
    //review form to be expanded
  </div>
</div

Я хочу сосредоточиться на a в .leave-review: я хотел бы развернуть #review_form_wrapper при нажатии, а затем прокрутить до раздела сразу после. Я могу развернуть форму, но не могу прокрутить ее до отображения.

Есть предложения? Я хотел бы использовать Vanilla JS, если это возможно, но jQuery тоже подойдет.

Answer 1

Я смог исправить это, используя не window.scrollTo(#reviewForm), а метод scrollIntoView(). Перед прокруткой я должен был проверить, имеет ли #review_form_wrapper класс show, который я использовал setTimeout() для:

function productReviewJS() {
  const link = document.querySelector("#scrollToReview");
  link.addEventListener("click", function () {
    window.setTimeout(function () {
      if (reviewForm.classList.contains("show")) {
        form.scrollIntoView({ behavior: "smooth" });
      }
    }, 400);
  });
}
productReviewJS();