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,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.