Как сделать scrolltop у аккордиона?

Question

[Evhar]

Есть аккордион на мобильных устройства при клике он выезжает вверх и контент не видно, как сделать скролл к началу элемента когда он открывается ? Вот код

const accordions = document.querySelectorAll(".accordion");

if(accordions) {
    document.addEventListener("DOMContentLoaded", () => {
        const accordions = document.querySelectorAll(".accordion");
        
        if (accordions) {
            const openAccordion = (accordion) => {
                const content = accordion.querySelector(".accordion__content");
                accordion.classList.add("open");
                content.style.maxHeight = content.scrollHeight + "px";
            };
        
            const closeAccordion = (accordion) => {
                const content = accordion.querySelector(".accordion__content");
                accordion.classList.remove("open");
                content.style.maxHeight = null;
            };
        
            openAccordion(accordions[0]);
        
            accordions.forEach((accordion) => {
                const intro = accordion.querySelector(".accordion__control");
                const content = accordion.querySelector(".accordion__content");
        
                intro.onclick = () => {
                    if (content.style.maxHeight) {
                        closeAccordion(accordion);
                    } else {
                        accordions.forEach((acc) => closeAccordion(acc));
                        openAccordion(accordion);
                    }
                };
            });
        }
    });
}

<ul class="">
    <li class="accordion">
        <button class="accordion__control" aria-expanded="false">
            кнопка
        </button>
        <div class="accordion__content" aria-hidden="true">
            <div class="">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, minima. Praesentium, ipsum quasi dignissimos animi fugit sunt delectus quis est dolor cupiditate provident, maiores amet accusantium reprehenderit minus sed eos, atque impedit. Inventore quasi molestiae corrupti, voluptatum beatae nemo facilis ipsam sequi, alias iusto nesciunt ex iste repudiandae illo vel, quas impedit voluptatibus magni corporis suscipit. Soluta eius explicabo accusantium corporis consequuntur velit necessitatibus libero illum praesentium, veritatis, voluptatum neque dicta? In, rem? Illo, deserunt impedit. Provident, tempore a porro quibusdam perspiciatis fugit ab et totam autem dolorum quasi dignissimos natus quos adipisci omnis ex qui, aspernatur minima magni sapiente iusto placeat laborum. Corrupti, ut qui asperiores numquam distinctio obcaecati quis ullam fuga alias ipsum modi aliquid. Optio dolorum similique nisi sint impedit ipsum aliquam nobis ratione omnis sequi, ullam ad magni velit aspernatur numquam deleniti quo. Quia obcaecati possimus veniam nobis, corrupti neque ea corporis? Excepturi repellendus, sequi officia debitis ea atque animi laudantium id asperiores earum quae. Blanditiis aliquam pariatur natus eos hic. Esse quia, rerum laboriosam vel accusantium explicabo perspiciatis odio adipisci! Quia quos nam adipisci, odit cumque officia magnam nobis eligendi esse. Explicabo nihil id porro eum reiciendis, blanditiis quaerat ratione dignissimos neque. Iste distinctio deserunt dolore ratione, repellat tempore ea ipsa velit praesentium a porro, quia fugiat aspernatur illum eaque, recusandae exercitationem tempora suscipit accusamus repellendus corporis officia? Modi illum, alias est odio reiciendis accusantium molestiae. Et voluptas aliquam rerum sapiente laboriosam fuga voluptates corrupti est officia ipsa quae dicta molestiae obcaecati ipsam expedita eius labore a facere eos dignissimos, tempora quas necessitatibus enim? Eum sapiente mollitia at, a natus placeat ullam distinctio unde molestias voluptates maxime doloribus impedit possimus fugit ipsa aliquid veritatis soluta saepe error porro quis sequi ad. Numquam labore, eaque, itaque nisi doloremque natus inventore aspernatur optio tempora eum rerum quae.
            </div>
        </div>
    </li>
    <li class="accordion">
        <button class="accordion__control" aria-expanded="false">
            кнопка
        </button>
        <div class="accordion__content" aria-hidden="true">
            <div class="">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, minima. Praesentium, ipsum quasi dignissimos animi fugit sunt delectus quis est dolor cupiditate provident, maiores amet accusantium reprehenderit minus sed eos, atque impedit. Inventore quasi molestiae corrupti, voluptatum beatae nemo facilis ipsam sequi, alias iusto nesciunt ex iste repudiandae illo vel, quas impedit voluptatibus magni corporis suscipit. Soluta eius explicabo accusantium corporis consequuntur velit necessitatibus libero illum praesentium, veritatis, voluptatum neque dicta? In, rem? Illo, deserunt impedit. Provident, tempore a porro quibusdam perspiciatis fugit ab et totam autem dolorum quasi dignissimos natus quos adipisci omnis ex qui, aspernatur minima magni sapiente iusto placeat laborum. Corrupti, ut qui asperiores numquam distinctio obcaecati quis ullam fuga alias ipsum modi aliquid. Optio dolorum similique nisi sint impedit ipsum aliquam nobis ratione omnis sequi, ullam ad magni velit aspernatur numquam deleniti quo. Quia obcaecati possimus veniam nobis, corrupti neque ea corporis? Excepturi repellendus, sequi officia debitis ea atque animi laudantium id asperiores earum quae. Blanditiis aliquam pariatur natus eos hic. Esse quia, rerum laboriosam vel accusantium explicabo perspiciatis odio adipisci! Quia quos nam adipisci, odit cumque officia magnam nobis eligendi esse. Explicabo nihil id porro eum reiciendis, blanditiis quaerat ratione dignissimos neque. Iste distinctio deserunt dolore ratione, repellat tempore ea ipsa velit praesentium a porro, quia fugiat aspernatur illum eaque, recusandae exercitationem tempora suscipit accusamus repellendus corporis officia? Modi illum, alias est odio reiciendis accusantium molestiae. Et voluptas aliquam rerum sapiente laboriosam fuga voluptates corrupti est officia ipsa quae dicta molestiae obcaecati ipsam expedita eius labore a facere eos dignissimos, tempora quas necessitatibus enim? Eum sapiente mollitia at, a natus placeat ullam distinctio unde molestias voluptates maxime doloribus impedit possimus fugit ipsa aliquid veritatis soluta saepe error porro quis sequi ad. Numquam labore, eaque, itaque nisi doloremque natus inventore aspernatur optio tempora eum rerum quae.
            </div>
        </div>
    </li>
</ul>

.accordion__content {
  max-height: 0;
  overflow: hidden;
  will-change: max-height;
  -webkit-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  
}

Answer 1

[Владимир Римидалв]

Попробуй так

const openAccordion = (accordion) => {
    // твой код
    accordion.scrollIntoView();
};

https://developer.mozilla.org/ru/docs/Web/API/Elem...

Answer 2

[Ivan Ustûžanin]

scrollIntoView