Scrolling to specific content allows users to navigate your page effortlessly without manual scrolling. ClickFunnels provides a built-in Scroll to action that enables buttons to guide visitors to specific Sections, Rows, or Elements. In this article, you'll learn how to select a container (Section, Row, Flex, or Element), assign a title for easy identification, and configure a button to enable smooth scrolling.
Requirements
An active ClickFunnels account
A page created in your workspace
Understanding Scroll to Content
Scroll to Content is a feature that enables smooth navigation within a page by directing users to a specific section when they click a button. Instead of manually scrolling, visitors can be instantly guided to relevant content, improving the user experience.
Example:
Consider a funnel page that comprises a Hero section, Testimonials section, About Us section, Offer section, and a Checkout section where users finalize their purchases. In the Hero section, you may incorporate an "Order Now" button and configure its action to scroll to the Checkout section. When users click this button, the page will smoothly transition to the Checkout section, making the purchasing process quicker and more seamless.
Step 1 - Select a Container and Change Its Title
Before setting up the scroll action, you must identify where the button should navigate when clicked. ClickFunnels allows you to scroll to Sections, Rows, Flex, or Elements.
Choosing a Target Container
A container refers to any Section, Row, Flex, or Element on the page. When you set up a Scroll to action, the button will scroll the page to the selected container. For easier selection, it’s recommended to give the container a clear title.
Changing Container Title
In the page editor, hover over a container (Section, Row, Flex, or Element).
Click the Code <> icon.
In the code editor, navigate to the CSS Info section
In the Title field, add the container's Title.
Tips:
A clear and concise naming convention (e.g., Section-hero, Row-slider, Element-checkout, etc.) will facilitate the identification of containers across various use cases, such as configuring button actions to scroll to specific sections or referencing an element in your custom CSS code.
Click Update to save changes.
Step 2: Configure the Button Action
Once the container is ready, follow these steps to configure a button to scroll to it:
In the page editor, click the orange + Plus or Add New Element button inside the row to insert a new element.
From the Form category, select the Button element.
Open the Button Settings and locate the Button Action section.
In the On Click settings, set the Button Action to “Scroll to.”
A drop-down menu will appear, showing available Sections, Rows, Flex, and Elements (using the titles assigned earlier).
Select the container you want to scroll to.
Click Save to save your changes.
Now, when visitors click the button, the page will automatically scroll to the designated content.
Caution:
Please ensure that the target container for the scroll action is not hidden. If the container’s visibility is set to Desktop Only or Mobile Only, the button’s visibility should match. For example, if the scroll-to container visibility is set to Mobile Only, but the button is only visible on Desktop, the scroll action will not work because the container is not visible on desktop.