
Tagged: disable scroll-to-top, popupmaker, scroll effects
-
AuthorPosts
-
February 5, 2025 at 12:32 am #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.
February 5, 2025 at 5:20 am #1476386Hey 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,
IsmaelFebruary 5, 2025 at 5:33 pm #1476431Thank you, Ismael – that solution works perfectly!
February 6, 2025 at 9:46 am #1476494Hi,
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,
IsmaelFebruary 6, 2025 at 6:30 pm #1476546Hello 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
February 7, 2025 at 6:44 am #1476589 -
This reply was modified 1 month, 1 week ago by
-
AuthorPosts
- The topic ‘Disable scroll to top when opening a popup’ is closed to new replies.