Accordion Scroll to top on open?

[minemindmedia]

Hello.
Does anyone know how to create an accordion that will scroll to the top of each accordion in a loop when opened?

I'm using an accordion to create a feed of data in a WordPress loop and I can't quite figure out how to make sure each new accordion will scroll to the top when opened. Right now when one is opened and another is clicked to open, it closes the current open accordion but jumps all over the place.

Would love to be able to slowly have the newly opened accordion scroll to the top of the viewport.

[SimoTod]

You can add html,body {scroll-behavior: smooth} to your stylesheet and navigate using eithe normal anchor links or element.scrollIntoView (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)

[MuzafferDede]

In case you are trying to scroll within an element, consider this + @SimoTod's suggest on wrapper.

<button x-on:click.prevent="$refs.wrapper.scrollTop = 0">Accordion Toggle</button>
<div x-ref="wrapper" .....>
Scroll Area
...
...

</div>

[minemindmedia]

Hi, thanks for the replies but I can't seem to get it to function.

Here's an example of my code in a WordPress Loop:

<div class="flex-1 pt-4 cursor-pointer" @click="selected !== {{ $counter }} ? selected = {{ $counter }} : selected = false">
    <h2 class="text-md font-normal leading-normal text-white"><?php the_field('headline', false, false); ?></h2>
        <span
        x-show="selected == {{ $counter }}"
        class="text-white"
        >
            <?php the_content(); ?>
        </span>  
</div>

When the <div> is clicked, it expands the <span> to show the content.

There are several of these <divs> in a row. When collapsed they're about 100px high.
What I'd like to achieve is to have each div (when expanded/opened) scroll to about 50px from the top of the viewport. When the next div is clicked to open, have it do the same.

Currently when I click a div to open, the page jumps all over the place and doesn't bring the current expanded div into view.

[SimoTod]

It will be something like

<div x-ref="accordion{{ $counter }}" class="flex-1 pt-4 cursor-pointer" @click="selected !== {{ $counter }} ? (selected = {{ $counter }}, $nextTick(() => $refs.accordion{{ $counter }}.scrollIntoView())) : selected = false">
    <h2 class="text-md font-normal leading-normal text-white"><?php the_field('headline', false, false); ?></h2>
        <span
        x-show="selected == {{ $counter }}"
        class="text-white"
        >
            <?php the_content(); ?>
        </span>  
</div>

Don't forget to add html,body {scroll-behavior: smooth} in your css file

For the 50px offset you can either add a padding somewhere or use a bit more javascript to get the accordion position and use scrollTo (https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) instead of scrollIntoView

[minemindmedia]

That's awesome! It works perfectly.

[minemindmedia]

Hello again.

I'm trying to set the scroll speed with scrollIntoView but there aren't any options for that as far as I have discovered.
So instead of scrollIntoView, I'm attempting to use scrollTo so I can set scroll speed and offset from the top of the viewport.

I haven't been able to find any examples of this anywhere with success.

Can anyone point me into the right direction?

TY-

[SimoTod]

I don't think you can set the speed with any of them. They all work with a default speed.
Unless you are referring to a third party library, in that case you need to bundle it in your main js file and make sure it's available on the window object (this depends on your process to build assets, it changes depending on what you us).

To set an offset using features available out of the box, you need to know the position of the element in page, it's probably easier to use scrollBy and element.getBoundingClientRect(). https://codepen.io/SimoTod/pen/VwarjZW