Skip to content
Sites

Scroll to Elements or Sections in Websites or Funnels

Learn how to scroll to any section on your funnel or website using links, buttons, or menu items in GHL Customer Care. Simple setup using CSS selectors.

3 min read696 words5 explained imagesUpdated Thu, 12 Feb at 4:58 PM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Key Benefits of Scroll to Element
  2. Smooth Scroll Enhancement
  3. Setting Up Scroll to Element
  4. Step 1: Copy the CSS Selector
  5. Step 2: Choose a Scroll Method
  6. Frequently Asked Questions
  7. Related Articles

This article shows you how to make buttons, links, or menu items automatically scroll to specific sections on your website or funnel pages. This is great for improving user experience and creating smooth navigation.

TABLE OF CONTENTS

What is Scroll to Element?

The scroll-to-element feature allows you to link any clickable item to a specific section on a page. This makes your pages more dynamic and user-friendly, especially for landing pages or long-format content.

Key Benefits of Scroll to Element

Understanding how to use scroll-to actions helps streamline user journeys and create seamless interactions.

  • Navigation Control: Send users to specific sections of the page without reloading.

  • Cleaner UX: Helps reduce bounce by guiding users through content fluidly.

  • Custom Interaction: Works for buttons, links, and navigation menus.

  • Optimized for CTAs: Great for “Jump to Pricing” or “Learn More” buttons.

  • Mobile Friendly: Scroll-to also functions smoothly across devices.

Smooth Scroll Enhancement 

Scroll-to-element actions now use smooth scrolling, instead of abrupt page jumps.

When users click a button, text link, or navigation menu item configured with “Scroll to Element,” the page transitions smoothly to the selected section. This creates a more natural browsing experience and improves visual flow, especially on long-form pages.

No additional configuration is required. Smooth scrolling is automatically applied to all scroll-to-element actions across funnels and websites.

Setting Up Scroll to Element

Learn how to scroll to a specific section using a simple selector-based linking method. Once you copy the selector, you can use it with text, buttons, or menu items.

Step 1: Copy the CSS Selector

Every scroll-to setup starts with getting the selector of the section you want to scroll to. You’ll paste this selector at the end of your link in Step 2.

  1. Open your funnel or website in the builder.

  2. Click on the section you want to scroll to.

  3. In the right-hand panel, go to the Advanced tab.

  4. Copy the value shown in the CSS Selector field.

Step 1: Copy the CSS Selector (image 1 of 5) What this shows Open your funnel or website in the builder. What this shows Illustrates the "Step 1: Copy the CSS Selector" section of "Scroll to Elements or Sections in Websites or Funnels". This screenshot appears in the "Step 1: Copy the CSS Selector" section of "Scroll to Elements or Sections in Websites or Funnels". The text alongside this image reads: Open your funnel or website in the builder. Click on the section you want to scroll to. In the right-hand panel, go to the Advanced tab. Copy the value shown in the CSS Selector field. Immediately after, the guide continues: Now that you have the CSS selector, choose one of the following methods to activate the scroll behavior when users click. Image 1 of 5 Where to goOpen your funnel or website in the builder. Click on the section you want to scroll to. In the right-hand panel, go to the Advanced tab. Copy the value shown in the CSS Selector field.
Buttons and menus referenced AdvancedCSS Selector
Next stepNow that you have the CSS selector, choose one of the following methods to activate the scroll behavior when users click.
All 4 steps in this procedure
  1. Open your funnel or website in the builder.
  2. Click on the section you want to scroll to.
  3. In the right-hand panel, go to the Advanced tab.
  4. Copy the value shown in the CSS Selector field.

Step 2: Choose a Scroll Method

Now that you have the CSS selector, choose one of the following methods to activate the scroll behavior when users click.

Method 1: Hyperlink Text to a Section

Turn text into a clickable scroll link using the copied selector.

  1. Highlight the desired text.

  2. Click the Link icon in the formatting toolbar.

  3. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/#section_abc12)
Method 1: Hyperlink Text to a Section (image 2 of 5) What this shows Highlight the desired text. What this shows Illustrates the "Method 1: Hyperlink Text to a Section" section of "Scroll to Elements or Sections in Websites or Funnels". This screenshot appears in the "Method 1: Hyperlink Text to a Section" section of "Scroll to Elements or Sections in Websites or Funnels". The text alongside this image reads: Highlight the desired text. Click the Link icon in the formatting toolbar. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12). Immediately after, the guide continues: Scroll to a section by assigning a direct URL to a button. Image 2 of 5 What to fill inHighlight the desired text. Click the Link icon in the formatting toolbar. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12)
Buttons and menus referenced Link icon
Next stepScroll to a section by assigning a direct URL to a button.
All 3 steps in this procedure
  1. Highlight the desired text.
  2. Click the Link icon in the formatting toolbar.
  3. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12)


Scroll to a section by assigning a direct URL to a button.

  1. Select the button in the builder.

  2. Under Button Actions, click the Link To dropdown and choose Website URL.

  3. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/#section_abc12)

Method 2: Use a Button with a URL Link (image 3 of 5) What this shows Select the button in the builder. What this shows Illustrates the "Method 2: Use a Button with a URL Link" section of "Scroll to Elements or Sections in Websites or Funnels". This screenshot appears in the "Method 2: Use a Button with a URL Link" section of "Scroll to Elements or Sections in Websites or Funnels". The text alongside this image reads: Select the button in the builder. Under Button Actions, click the Link To dropdown and choose Website URL. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12). Immediately after, the guide continues: Scroll to a section using GHL Customer Care’s built-in scroll behavior. Image 3 of 5 What to fill inSelect the button in the builder. Under Button Actions, click the Link To dropdown and choose Website URL. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12)
Buttons and menus referenced Button ActionsLink ToWebsite URL
Next stepScroll to a section using GHL Customer Care’s built-in scroll behavior.
All 3 steps in this procedure
  1. Select the button in the builder.
  2. Under Button Actions, click the Link To dropdown and choose Website URL.
  3. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12)

Method 3: Use a Button with Scroll to Element Action

Scroll to a section using GHL Customer Care’s built-in scroll behavior.

  1. Select the button in the builder.

  2. Under Button Actions, click the Link To dropdown and choose Scroll to Element.

  3. Use the dropdown to select the section you want the button to scroll to.

Method 3: Use a Button with Scroll to Element Action (image 4 of 5) What this shows Select the button in the builder. What this shows Illustrates the "Method 3: Use a Button with Scroll to Element Action" section of "Scroll to Elements or Sections in Websites or Funnels". This screenshot appears in the "Method 3: Use a Button with Scroll to Element Action" section of "Scroll to Elements or Sections in Websites or Funnels". The text alongside this image reads: Select the button in the builder. Under Button Actions, click the Link To dropdown and choose Scroll to Element. Use the dropdown to select the section you want the button to scroll to. Immediately after, the guide continues: Navigation menus can also be configured to scroll to a section of the page. Image 4 of 5 What to chooseSelect the button in the builder. Under Button Actions, click the Link To dropdown and choose Scroll to Element. Use the dropdown to select the section you want the button to scroll to.
Buttons and menus referenced Button ActionsLink ToScroll to Element
Next stepNavigation menus can also be configured to scroll to a section of the page.
All 3 steps in this procedure
  1. Select the button in the builder.
  2. Under Button Actions, click the Link To dropdown and choose Scroll to Element.
  3. Use the dropdown to select the section you want the button to scroll to.

Method 4: Make a Navigation Menu Item Scroll

Navigation menus can also be configured to scroll to a section of the page.

  1. Select the Navigation Menu.

  2. Click the three dots next to a menu item.

  3. Change the Go to field to Go to website URL.

  4. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/#section_abc12)

  5. Click Submit.

Method 4: Make a Navigation Menu Item Scroll (image 5 of 5) What this shows Select the Navigation Menu. What this shows Illustrates the "Method 4: Make a Navigation Menu Item Scroll" section of "Scroll to Elements or Sections in Websites or Funnels". This screenshot appears in the "Method 4: Make a Navigation Menu Item Scroll" section of "Scroll to Elements or Sections in Websites or Funnels". The text alongside this image reads: Select the Navigation Menu. Click the three dots next to a menu item. Change the Go to field to Go to website URL. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12) Click Submit. Immediately after, the guide continues: Q: Can I scroll between different funnel steps? No. Scroll-to only works on the same page. Image 5 of 5 What to fill inSelect the Navigation Menu. Click the three dots next to a menu item. Change the Go to field to Go to website URL. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12) Click Submit.
Buttons and menus referenced Navigation Menuthree dotsGo towebsite URLSubmit
Next stepQ: Can I scroll between different funnel steps? No. Scroll-to only works on the same page.
All 5 steps in this procedure
  1. Select the Navigation Menu.
  2. Click the three dots next to a menu item.
  3. Change the Go to field to Go to website URL.
  4. Enter your full page URL + the CSS selector you copied. (Example: www.yourdomain.com/ #section_abc12)
  5. Click Submit.

Frequently Asked Questions

Q: Can I scroll between different funnel steps?
No. Scroll-to only works on the same page.

Q: Will this work on mobile?
Yes, the scroll functionality works across devices.

Q: My scroll isn’t working. What should I do?
Check that your selector is correct and that it starts with #. Refresh the page and test again.

Q: What happens if multiple sections have the same CSS selector?
Only the first match will be used. Ensure each scroll target has a unique selector.

Was this guide helpful?

Related guides

How to Add a Two‑Step Order Form to a Funnel5 min read · 12 imagesTracking Scripts/Pixel Code1 min readSEO Meta Data1 min readClick-To-Call, Click-To-Text, and Click-To-Email Links & Buttons for Websites and Funnels3 min read · 5 images