GHL Smooth Scroll Still Broken? Here’s the CSS Fix That Worked for Me
HighLevel says smooth scrolling is fixed, yet I keep running into the same problem.
I configure a button to scroll to a section farther down the page. Instead of moving smoothly, the page jumps there instantly.
If you’re dealing with the same frustration, here’s what worked and what to check before you call it solved.
What HighLevel Says Should Happen
HighLevel’s documentation says its Scroll to Element action scrolls smoothly, automatically, with “No additional configuration” required. That should make the setup straightforward.
Select your button.
Choose Scroll to Element.
Select the destination section.
Done!
Except I’ve encountered the abrupt jump repeatedly, despite HighLevel’s claim that smooth scrolling is fully functional.
A feature described as fixed still needs a workaround on my GHL pages.
Frustrating? Absolutely.
Fortunately, the workaround to solve this problem is simple and easy.
The CSS Fix That Worked on My Page
Open the affected funnel or website page in HighLevel’s page builder.
Find the page’s Custom CSS area, under Settings → Custom CSS in builder layouts that use that menu.
Add:
html { scroll-behavior: smooth !important;
}Paste the CSS directly. You don’t need <style> tags inside a Custom CSS field.
Adding this rule restored the smooth scrolling I expected on my page.
The rule tells the browser to use smooth scrolling for applicable navigation and scrolling operations. Applying it to html makes it govern the page viewport.
The !important gives the declaration priority over ordinary competing CSS rules.
That explains what the rule does. It doesn’t establish exactly why GHL’s native behavior failed.
What I can confirm is the result: my button scrolled smoothly after I added it.
See Mozilla Developer Network's explanation of scroll behavior for more information.
Keep the Button’s Native Scroll Action
Leave the button configured as:
Button → Link To → Scroll to Element
Confirm that you selected the correct destination section.
HighLevel documents this as its native button action for scrolling within a page. It also supports section links through URLs, but you don’t need to change linking methods to try this fix.
Change one thing. Test the result.
If you change the button action, the link destination, CSS, and page structure all together, it's a lot harder to identifywhich change resolved the problem.
If a Sticky Header Covers the Destination
Smooth scrolling and correct positioning are separate concerns.
Your button may reach the right section while leaving its heading hidden beneath your sticky navigation.
If that happens, add a scroll offset:
html { scroll-behavior: smooth !important; scroll-padding-top: 90px;
}The scroll-padding-top declaration reserves room at the top of the viewport for supported scroll positioning. It’s intended for situations such as a fixed header obscuring the destination. MDN’s scroll-padding-top documentation.
The 90px value is an example. Adjust it to your header’s actual height.
Check mobile separately. Your navigation may occupy a different amount of space on a phone.
If you don’t have a sticky header, start with the simpler snippet.
Respect Reduced-Motion Preferences
Some visitors have enabled reduced motion in their device settings.
Add this beneath your scrolling rule:
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; }
}This removes the CSS-driven smooth animation when that preference is present. MDN’s reduced-motion documentation.
For a page with a sticky header, the complete snippet becomes:
html { scroll-behavior: smooth !important; scroll-padding-top: 90px;
} @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; }
}A visitor who requests less animation should get less animation.
Verify the Result on Your Page
This worked on my page. Yours still needs its own check.
Start on a duplicate or test page, then verify:
The button reaches the correct section.
The transition scrolls smoothly when reduced motion is off.
The destination heading remains visible beneath any sticky header.
The behavior works on desktop and mobile.
Reduced-motion mode removes the CSS-driven animation.
After publishing through your normal process, check the public URL too.
The code being present isn’t the acceptance test. The page behaving correctly is.
If It Still Jumps
This CSS may not solve every GHL scrolling issue.
JavaScript can explicitly request an instant scroll, and browsers are allowed to ignore scroll-behavior. Adding !important doesn’t remove those limits. MDN’s scrolling API reference, CSS scroll-behavior reference.
If the rule doesn’t help, record the affected page, button, destination, browser, and device. Capture a short screen recording.
Then have the actual scrolling behavior inspected before adding more code.
A failed workaround gives you a reason to investigate. It doesn’t prove the cause.
Save Yourself the Next Troubleshooting Session
Once you’ve verified the result, document it.
Record where you installed the CSS, any header offset you used, and how you tested the page. Put that information somewhere your team can find it.
You still own the decision about how your website should behave. Remembering the workaround every time this issue returns can become a documented task someone else handles.
The CSS restored smooth scrolling on my page.
Test it on yours. Record the result. Get one more recurring problem off your list.
