Avada Forums Community Forum Accordion Auto Scroll To Top

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • denise.cassar
    Participant
    Post count: 2

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

    idberlin
    Participant
    Post count: 1

    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
    Participant
    Post count: 873

    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.