JavaScript Accoridon - Automatisches Scrollen zum Anfang des offenen Akkordeons

Question

Ich versuche mein Akkordeon so einzurichten, dass wenn ein Benutzer auf eine der Überschriften klickt, die Seite automatisch zum oberen Rand der Überschrift scrollt und das offene Panel anzeigt für diesen Akkordeonartikel.

Allerdings ist das Problem, das ich derzeit habe, dass mit dem Code, den ich implementiert habe, mein Bildschirm nach oben scrollt, so dass die Überschrift des Akkordeonelements, direkt am unteren Rand meines Bildschirms, also den Inhalt in der Anzeige ist außerhalb des Bildschirms.

Hier ist mein HTML-Code:

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

Hier ist mein JavaScript-Code:

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 zeigt die relative Position der Eltern Element oben. Sie sollten die Position relativ zum oberen Rand Ihres Fensters erhalten. Dieser Code sollte für Sie arbeiten:

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