Wie erreiche ich, dass mein Akkordeon-Panel automatisch nach unten scrollt, wenn es geöffnet wird?

Question

Wenn ich ein Akkordeon öffne, möchte ich das Panel zu erweitern, sobald es erweitert hat, möchte ich HTML-Seite zum automatischen Scrollen zu Panel. Wenn ich zum Beispiel auf ein Panel klicke, das ausgeblendet wird, wie kann ich es so einrichten, dass meine Webseite automatisch zum Panel runterscrollt?

HTML-Code:

<button class="accordion">Images</button> 
    <div class="panel"> 
     </div> 
    </div> 
<button class="accordion">Images</button> 
    <div class="panel"> 
     </div> 
    </div> 

JavaScript:

<script> 
     var acc = document.getElementsByClassName("accordion"); 
     var i; 

     for (i = 0; i < acc.length; i++) { 
      acc[i].onclick = function(){ 
       this.classList.toggle("active"); 
       this.nextElementSibling.classList.toggle("show"); 
      } 
     } 
    </script> 

Answer 1

Wenn Sie jQuery verwenden, können Sie so etwas wie dies versuchen:

$(".accordion").on("click", function(){ 
    $("html, body").animate({ scrollTop: $(this).offset().top }, 'fast'); 
    return true; 
}); 

Das wird die Web-Seite um zu dem Element zu blättern, wenn auf die Akkordeon-Schaltfläche geklickt wird.