Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1476368

    Hello,

    I have CTA buttons in several sections on a page, each button with the class of “.pop-button” (just including this info, the button class may not be important). The CTA buttons link to a popup that is referenced with an anchor, such as #popmake-19002

    I’ve added the following CSS that references the popup class(es):
    /* prevent page scroll on popup trigger */
    html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
    overflow: hidden;
    position: fixed;
    width: 100%;
    }
    html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    }
    When any button past the first scroll is clicked, the popup opens but the page scrolls back to the top behind the overlay. I want the page to maintain the y position when the popup is opened. Note that I will have several different pages with a similar need, opening different popups, so targeting a class rather than an ID element would be ideal.

    I viewed the solution for Magnific popup but am using Popup Maker, and can’t figure out how to modify the script to make it work with Popup Maker.

    Thanks in advance for any tips you can provide. I plan to continue trying to solve this issue and will add an update if I am able to solve it before you respond.

    #1476386

    Hey rlhinirv57,

    Thank you for the inquiry.

    We extract the html of the “Get Started With IT Talent” button, place it in a Code Block element, then add the class name “no-scroll” to the link (a) tag.

    
    <div class="avia-button-wrap av-nff239-2095338f556d798c2692e20ebf8185dd-wrap avia-button-center  avia-builder-el-23  avia-builder-el-no-sibling  "><a href="#popmake-19002" class="avia-button no-scroll av-nff239-2095338f556d798c2692e20ebf8185dd av-link-btn avia-icon_select-no avia-size-large avia-position-center avia-color-theme-color pum-trigger" aria-label="Get Started With IT Talent" style="cursor: pointer;"><span class="avia_iconbox_title">Get Started With IT Talent</span></a></div>
    

    This should prevent the page from scrolling back to the top.

    Best regards,
    Ismael

    #1476431

    Thank you, Ismael – that solution works perfectly!

    #1476494

    Hi,

    Great! Glad to know this worked. You can also apply a Custom CSS Class name to the button element and create a script that adds the “no-scroll” class to the child link () tag. Let us know if you have any other questions.

    Have a nice day!

    Best regards,
    Ismael

    #1476546

    Hello Ismael,

    Thanks for your assistance. I was able to solve this by using the button class as a trigger to open the popup instead of setting an anchor link with a #.
    Consider this issue closed.

    I would prefer to do a script solution so that my client can simply add buttons in the future instead of needing to use the code block. I did add the custom class of “pop-button” to the buttons that are intended to open the popup(s) but couldn’t figure out how to disable the scrolling to top.

    Javascript is not my skill set. I tried several script solutions found online before contacting Enfold support and none actually worked. If you can point me to a script that does work, that is greatly appreciated. I have the plugin Code Snippets installed so I can add a script to the header or footer as needed.

    • This reply was modified 1 month, 1 week ago by rlhinirv57. Reason: Solved the issue
    #1476589

    Hi,

    Good to know that you managed to find a workaround — adding the script won’t be necessary in this case. Please feel free to open another thread if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Disable scroll to top when opening a popup’ is closed to new replies.