Skip to main content

How to Add a Button That Scrolls to a Section

Use a Button when visitors should jump from a hero CTA down to pricing, a form, FAQ, or another offer section without leaving the page.

Before You Start​

Make sure you have:

  • A page open in the Page Builder.
  • A clear destination section already on the page (form, pricing, offer block).
  • The Navigator open so you can read section/element IDs accurately.

Step 1: Prepare the Target Section​

  1. Select the destination section or container on the canvas (or in the Navigator).
  2. Note or set a stable ID (or class) you will reference from the button.
  3. Avoid duplicate IDs — wrong or repeated IDs make scroll/reveal feel broken.

Keep the target section visible on the published page (not hidden on every device) unless you intentionally use a reveal action.

Step 2: Add the Button​

  1. Drag a Button above the fold where the CTA is expected.
  2. Set a short label such as See pricing, Get started, or Claim offer.
  3. Open the button’s click event settings.

See Button element (reference).

Step 3: Configure Scroll or Reveal Behavior​

Depending on the actions available in your button click event list, use one of these approaches:

ApproachWhen to use
Show item by ID / classReveal a delayed or hidden section, or jump interaction tied to that ID/class.
Link with section hashNavigate to #your-section-id when your page IDs support hash scrolling.
  1. Choose the click event that targets the section ID or class.
  2. Enter the exact ID/class from Step 1 — spelling and casing must match.
  3. Save the button settings.

If the section should only appear after video delay, combine this with delay settings carefully so the target exists when the visitor clicks. See Delay settings.

Step 4: Style and Place the CTA​

  1. Style the button for clear contrast and a large enough touch target.
  2. Use responsive preview to confirm the CTA stays easy to tap on mobile.
  3. Keep the button job focused — scroll/reveal only; put explanation in nearby text.

Step 5: Publish and Test​

  1. Save and Publish the page.
  2. Open the live URL on desktop and click the button.
  3. Confirm the page scrolls to (or reveals) the correct section.
  4. Repeat on a phone-width viewport — auto-scroll can land at a different visual point than desktop.

Troubleshooting​

ProblemWhat to try
Nothing happensConfirm the click event and ID/class match exactly.
Scrolls to wrong placeFix duplicate IDs; select the intended section in Navigator.
Target missingSection may still be delayed/hidden — wait for delay or adjust visibility.
Mobile lands poorlyReduce sticky headers/overlays and retest the target section padding.

Outcome​

Visitors can move from your CTA to the intended on-page section in one click without leaving the funnel page.

FAQ​

Can a button open a different page instead of scrolling?

Yes. Use a normal link click event with a URL. See How to add a link to a button.

What if my section is behind a delay?

The destination must exist when the visitor clicks. If delay still hides the section, wait for the reveal or reduce the delay before sending traffic.

Should I use ScrollUp for this?

No. ScrollUp is a page-level control that returns visitors to the top. Use a Button (or hash/ID action) to jump downward to a specific section.