How To Create A Scroll To Top Button In FG Funnels

The video and article below will walk you through how to create a button that scrolls to the top of the page in any funnel or website in your FG Funnels account.


Unicode Arrow:

⇧

CSS:

.scrollToTop.midSection {
    max-width: fit-content;
    right: 20px !important;
}

Creating A Scroll To Top Button In Your Funnels And Websites

  1. Accessing Page Builder
    1. Open the page builder in a funnel or website in your FG Funnels account.
  2. Adding a Small Width Section
    1. Scroll to the bottom of the page.
    2. Click on the plus sign in the top left corner, below the Back button, to add a new element.
    3. Select a small section from the sections menu on the left.
    4. Drag the section to the bottom of the page.
  3. Adding a Button Element
    1. Add a one-column row within the section.
    2. Insert a button element.
    3. Customize the button's background color, font size, and padding.
    4. Change the text to indicate "scroll to top" or choose a Unicode arrow for visual appeal.
  4. Setting Button Actions
    1. Configure the button to scroll to a specific element.
    2. Select the top section or any desired section to scroll to.
  5. Styling the Section
    1. Adjust the sticky option to stick to the bottom on scroll.
    2. Modify the width of the section to small.
    3. Add the custom class ScrollToTop to the button's Custom Classes field.
  6. Applying Custom CSS
    1. Access the custom CSS option.
    2. Paste in CSS code to customize the appearance of the scroll-to-top element.
  7. Finalizing and Previewing
    1. Adjust padding and spacing as needed.
    2. Save the changes.
    3. Preview the page to ensure the scroll-to-top button is functional and visually appealing.
    4. Test the functionality on both desktop and mobile devices.
    5. Verify that clicking the button scrolls the page back to the top.