Accordion Auto Scroll To Top

[denise.cassar]

#859148

Hi 🙂 Does anyone know how to make Avada’s toggle accordion auto scroll to top of the active drop down?

[idberlin]

#876435

Yes, I have the same problem. Using the accordion, clicking on a lower toggle auto closes the top one, and the viewport displays the bottom part of the current accordion toggle and the user must scroll back up to see the beginning of the current active toggle.

So is there a way to auto scroll to the top of the active toggle?

I hope there’s a solution to this, because it makes the accordion rather less than useful it seems.

Daniel.

[marklchaves]

#876450

Hi,

I think that’s a cool feature request. If you’re handy with JavaScript or are working with a web developer, it’s pretty straightforward to do.

Here’s an example snippet that would make that possible.

  /**
   * Add this code to the event listener for your toggle items.
   */

  // Let's dynamically scroll to the top of the active accordion
  // element.
  const headerOffset = 105; // If you have a fixed header
  const elementPosition = accordThing.getBoundingClientRect().top;
  const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

  window.scrollTo({
    top: offsetPosition,
    behavior: "smooth"
  });

Here’s a video of the result: https://www.loom.com/share/b551627b818a409bbbefd0e69125e8a9?sharedAppSource=personal_library

Enjoy!

[Author]

Posts