展开手风琴并在展开后滚动到某个部分答案

【问题标题】：Expanding an accordion and scrolling to a section after expansion展开手风琴并在展开后滚动到某个部分
【发布时间】：2020-06-16 20:36:32
【问题描述】：

我在 cmets 部分的底部有一个 cmets 部分和一个审核表。我将整个 cmets 部分包裹在带有 Collapse 类的 Bootstrap Accordion 中：

编解码器：

查看演示。请注意，单击“留下评论”链接会展开 review_form，但不会滚动到。 Working codepen

我试过onClick="window.scrollTo(#review_form)"，但不起作用。

基本 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

我想关注.leave-review 中的a：我想在点击时展开#review_form_wrapper，然后立即滚动到该部分。我可以让表单展开，但我无法让表单滚动到视图中。

有什么建议吗？如果可能的话，我想使用 Vanilla JS，但 jQuery 也可以。

【问题讨论】：

标签： javascript html jquery

【解决方案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();

【讨论】：