如何讓手風琴面板在打開時自動向下滾動？

Question

當我打開手風琴時，我希望面板展開，然後一旦展開，我想要html頁面自動滾動到面板。例如，如果我點擊一個展開時隱藏的面板，我該如何製作它，以便我的網頁自動向下滾動到面板？

HTML代碼：

<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

如果你使用jQuery，你可以嘗試這樣的事：

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

這將使網頁當手風琴按鈕被點擊時滾動到元素。