--- title: "How to enable Scroll to Specific Content on Click" slug: "enabling-scroll-to-specific-content-on-click" description: "Learn to use ClickFunnels' Scroll to action for smooth navigation, guiding users effortlessly to specific content with a click of a button or text link." tags: ["editor"] updated: 2025-07-30T19:50:00Z published: 2025-07-30T19:50:00Z canonical: "support.myclickfunnels.com/enabling-scroll-to-specific-content-on-click" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # Enabling Scroll to Specific Content on Click Scrolling to specific content allows users to navigate your page effortlessly without manual scrolling. ClickFunnels provides a built-in Scroll to feature triggered by buttons and text links to guide visitors to specific Sections, Rows, Flex, or Elements. In this article, you'll learn how to prepare a target container and configure button actions and text links to enable smooth scrolling. --- ## Requirements - An active ClickFunnels account - A page created in your workspace - A button or text element --- ## 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 or text link. 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 link 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 link, the link will scroll the page to the selected container. It’s recommended that the container be given a clear title for easier selection. #### Changing Container Title 1. In the page editor, hover over a container (**Section**, **Row**, **Flex**, or **Element**). 2. Click the **Code <>** icon. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-Q7C7QAIY.png) 3. In the code editor, navigate to the **CSS Info** section 4. In the Title field, add the container's **Title**. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-LRD7QGYU.png) > [!TIP] > **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. 5. Click **Update** to save changes. --- ## Step 2: Set the Link Action ### Setting the Button Action to "Scroll To" Once the container is ready, follow these steps to configure a button to scroll to it: 1. In the page editor, click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element. 2. From the **Form** category, select the **Button** element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-BNOJPEG7.png) 3. Open the **Button Settings** and locate the **Button Action** section. 4. In the **On Click** settings, set the Button Action to “**Scroll to.”** 5. A drop-down menu will appear, showing available Sections, Rows, Flex, and Elements (using the titles assigned earlier). 6. Select the container you want to scroll to. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-GB0OI2C1.png) 7. Click **Save** to save your changes. Now, when visitors click the button, the page will automatically scroll to the designated content. > [!CAUTION] > **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. ### Using Text Links to Scroll to Content You can also enable scrolling by linking text to a specific part of the page. This is useful for linking inline text, such as "Learn more" or "Go to checkout." To do this, use the format: `#scroll-[ID]`, where `[ID]` is the system-generated ID of the target container (Section, Row, Flex, or Element). 1. In the page editor, open the **Code <>** panel of the container you want to scroll to. 2. When the CSS tab is selected, find the **CSS Info** section. 3. Below the CSS ID Selector field, click **Generate ID**. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-04DMUSHN.png) 4. Copy the **system-generated ID** (e.g., `#id-6Z-8oepNL-481`) displayed in the CSS Info section. 5. Navigate to the text where you want to link the action. 6. Link the text to `#scroll-[ID]`, replacing the ID (e.g., `scroll-id-6Z-8oepNL-481`) with the one from your container. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-GFOM9BVY.png) > [!CAUTION] > Caution: > > - Smooth scrolling will only work if you use the **system-generated ID**. If you manually enter a custom ID into the container, the scroll action will not function. Alternatively, use a Button element if you need to scroll to a container with a custom ID. > - 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. ## Related - [Setting Up Actions for Buttons, Text, and Images in ClickFunnels](/setting-up-actions-for-buttons-text-and-images.md) - [Show/Hide Contents on Button Click](/show-hide-contents-on-button-click.md) - [Button: Allow Users to Submit Actions](/button-allow-users-to-submit-actions.md) - [Getting Started with Styles](/getting-started-with-styles.md) - [Adding Custom CSS Code to Your ClickFunnels Pages](/adding-custom-css-code-to-your-clickfunnels-pages.md)