Как настроить прокрутку вверх при использовании аккордеона?

Question

MidnightHowl

html , javascript , css

Как настроить прокрутку вверх при использовании аккордеона?

Как можно настроить скролл к началу элемента аккордеона при его открытии на мобильных устройствах? Вот JavaScript код, который управляет аккордеоном: <br/><br/><pre><code class="javascript">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";
        
                // Необходимо добавить здесь скролл к началу элемента
            };
        
            // Другие функции openAccordion и closeAccordion
        
            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);
                    }
                };
            });
        }
    });
}</code></pre><br/><br/><pre><code class="html">&lt;ul class=""&gt;
    &lt;!-- Ваш HTML код с аккордеоном --&gt;
&lt;/ul&gt;</code></pre>

7 августа 2024 г. 18:53

Ответы на вопрос 3

Похожие вопросы

Answer 1

Для настройки скролла к началу элемента аккордеона при его открытии на мобильных устройствах вам нужно добавить следующий код в функцию openAccordion после установки maxHeight для содержимого:

```javascript
const openAccordion = (accordion) => {
    const content = accordion.querySelector(".accordion__content");
    accordion.classList.add("open");
    content.style.maxHeight = content.scrollHeight + "px";

    // Настройка скролла к началу элемента
    const accordionTop = accordion.offsetTop;
    window.scrollTo({
        top: accordionTop,
        behavior: "smooth"
    });
};
```

Этот код будет автоматически прокручивать страницу к началу открытого аккордеона при его открытии. Важно убедиться, что вы используете `behavior: "smooth"`, чтобы сделать прокрутку плавной.

Answer 2

Попробуй так 
 
 const openAccordion = (accordion) => {
    // твой код
    accordion.scrollIntoView();
};
 
 
 https://developer.mozilla.org/ru/docs/Web/API/Elem...

Answer 3

scrollIntoView