Skip to main content

Scroll To Top Action in Poper

Written by Karan Bhakuni

Poper allows you to integrate a "Scroll to Top" action with a clever twist! This guide will show you how to create a scroll-activated button that encourages users to navigate back to the top of your webpage and automatically hides when they scroll back up.
​

Enabling Scroll-Activated "Scroll to Top" Action:

Access Your Poper Popup:

Start by logging in to your Poper dashboard and opening the specific popup you want to modify.
​

Select Clickable Element/Button:

Within the popup editor, identify the element or button that will trigger the scroll to top action. This could be a text button, an image, or any other clickable element.
​

Choose "Scroll to Top" Action:

Locate the section where you define the action triggered upon clicking the chosen element/button. From the available options, select "Scroll to Top."
​

Setting Up Scroll Trigger (Optional):

While the "Scroll to Top" action works on its own, Poper might offer additional options for triggering the button based on user scrolling behavior. These options might be located in a section labeled "Triggers" or similar (check your specific Poper version).
​

If available, look for an option to trigger the popup display based on scroll depth (e.g., "On Scroll Depth"). You can then set a percentage (like 30-40%) to define how far down the user needs to scroll before the "Scroll to Top" button appears.
​

Adding the Disappearing Act:

Within the "On Scroll" settings, locate a section labeled "Close Popup After Scrolling Up." This section controls what actions cause the popup to close.

Enable "On Scroll Up":

Look for an option labeled "On Scroll Up" or similar. This setting triggers the popup to close (or hide) when the user scrolls back up the page.
​

Leave Default Settings (Optional):

Most Poper versions likely have pre-configured settings for the "On Scroll Up" trigger. These typically involve hiding the popup after the user scrolls back up a certain percentage (often mirroring the scroll depth set for the initial display). You can usually leave these settings at default.
​

Saving and Testing:

Save Your Changes:

Once you've configured the "Scroll to Top" action and the "On Scroll Up" trigger (if available), click the "Save" button to apply the changes to your popup.
​

Test Thoroughly:

Preview or publish your popup and test the functionality. Scroll down the page to a point beyond the trigger depth (if set) and verify that the "Scroll to Top" button appears. Then, scroll back up, and confirm that the button automatically hides.
​

Benefits:

  • Improved User Experience: Offering a "Scroll to Top" button when users scroll down enhances user experience by providing an easy way to navigate back.

  • Unobtrusive Design: The automatic hiding feature prevents the button from cluttering the screen once the user no longer needs it.

By implementing this "Scroll to Top" with a disappearing act functionality, you can provide a user-friendly and visually pleasing way for visitors to navigate your webpages within Poper.
​

Did this answer your question?