Smooth scrolling enhances the user experience on long or multi-section landing pages by animating the scroll behavior when navigating between areas of the page. Instead of jumping abruptly, the page glides to the target section—keeping users oriented and improving flow.
This is especially relevant when you’re using anchor links (e.g., menu items or buttons that jump to specific sections of the same page).
When Should You Use Smooth Scrolling?
Smooth scroll is ideal for:
Single-page landing pages with vertical sections
Anchor-based navigation menus
Call-to-action buttons that link to forms or donation areas
“Scroll down” prompts on hero sections
“Back to top” buttons
If you’re using <a href="#target"> to navigate within the same page, smooth scrolling provides a cleaner and more modern experience.
Option 1: Global Smooth Scroll with CSS (Recommended)
The easiest and most effective way to activate smooth scrolling for all anchor-based navigation is to use a single CSS rule:
<style>
html {
scroll-behavior: smooth;
}
</style>
This applies globally to all scroll actions triggered by in-page anchor links (i.e., anything using href="#section"). You only need to insert this once—ideally in a custom HTML block near the top of your CamBuildr page.
Option 2: Manual Smooth Scroll with JavaScript
If you need more control—like applying offsets (e.g., for fixed headers) or triggering scrolling through other logic—you can use JavaScript:
HTML Example:
<a href="javascript:void(0)" onclick="scrollToSection('form')">Join Now</a>
JavaScript:
<script>
function scrollToSection(id) {
const target = document.getElementById(id);
if (target) {
target.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
}
</script>
Notes and Tips
The CSS method (scroll-behavior: smooth) is widely supported in modern browsers and is preferred for anchor links.
JavaScript is useful for more advanced use cases, including scroll offsets or scroll-triggered animations.
This feature doesn’t affect normal scroll behavior (e.g., using the mouse or keyboard). It only applies to programmatic or anchor-triggered scrolls.