Skip to main content

How to Scroll to Elements or Sections in Stack Websites or Funnels

Navigating through your Stack websites or funnels can be enhanced by creating anchor links that scroll to specific sections. Here are three methods to achieve this:

Method 1: Hyperlinking Text Elements​

Steps to Hyperlink Text​

  1. Highlight the Text: Select the text you want to link to a section.
  2. Link the Text: Click the "link" button and paste the CSS Selector ID (e.g., #section-6EZdwvZ3l) into the input field.
  3. Save Changes: Press "Enter" to save. The text will turn blue, indicating the link is active.

Note: To link to a section on another page, use the full page URL followed by the CSS Selector ID, like https://www.URL.com/funnelpath#CSSSELECTORID.

Method 2: Using a Button Element​

Button Option 1: Website URL​

  1. Select the Button: Click the button you want to link.
  2. Enter the URL: In the dropdown menu, paste the full URL with the CSS Selector ID.
  3. Choose Action: Decide if the link should open in a new tab.
  4. Save: Click "Save" in the top right corner.

Button Option 2: Scroll to Element​

  1. Select the Button: Click the button you want to link.
  2. Choose "Scroll to Element": From the "Button Actions" dropdown, select this option.
  3. Select the Section: Choose the section from the dropdown menu.
  4. Label Sections (Optional): To label sections, click the section, enter a name in the left menu, and it will appear in the dropdown.

Method 3: Using the Navigation Menu​

Steps for Navigation Menu​

  1. Select the Navigation Menu: Click on the menu element.
  2. Edit Menu Item: Click the pencil icon next to the menu item you wish to edit.
  3. Enter URL: Select "Go to website URL" and paste the URL with the CSS Selector.
  4. Open in New Tab: Toggle this option if desired.
  5. Save: Click "Submit" and then "Save".

Quick Tips for Using CSS Selectors​

  • Finding Your CSS Selector ID:

    1. Open the Builder and select the section.
    2. Go to "Advanced" in the left menu and scroll to find the CSS Selector.
    3. Copy the selector ID for use in links.

  • Common Use Cases:

    • Link a "Table of Contents" to sections.
    • Direct users to "Terms of Service" sections.
    • Create quick links for staff scripts.
    • Link a "Book a Call" button to a booking widget.
    • Direct multiple buttons to a single section like an opt-in form.

By following these methods, you can efficiently guide users through your Stack websites and funnels, enhancing the user experience with seamless navigation.