JavaScript Accoridon-自動滾動到打開的手風琴頂部

Question

我正在嘗試設置手風琴，以便當用戶單擊標題之一時，頁面將自動向下滾動到標題的頂部，並顯示該手風琴項目的打開面板。

但是，我目前遇到的問題是，使用已實現的代碼，我的屏幕正在向上滾動，因此手風琴項目的標題正好位於屏幕底部，因此面板中的內容不在屏幕上。

這是我的HTML代碼：

<div class="accordion" style="margin-bottom:30px"><b>Heading 1</b></div>
<div class="panel">
  <p class="text-light">Text 1</p>
</div>
<div class="accordion" style="margin-bottom:30px"><b>Heading 2</b></div>
<div class="panel">
  <p class="text-light">Text 2</p>
</div>  

這是我的JavaScript代碼：

var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {
 acc[i].onclick = function() {
    var setClasses = !this.classList.contains('active');
    setClass(acc, 'active', 'remove');
    setClass(panel, 'show', 'remove');

    if (setClasses) {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }

    document.body.scrollTop = this.offsetTop;
 }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}

Answer 1

this.offsetTop顯示相對於父元素頂部的相對位置。 您應該獲得相對於窗口頂部的位置。 此代碼應為您工作：

document.documentElement.scrollTop +=this.getBoundingClientRect().top