Site Designer Guide
effects scroll anchor links smooth scroll navigation accessibility

Smooth scroll behavior

Smooth scrolling replaces the jarring instant-jump that happens when a user clicks an anchor link with a fluid, animated scroll to the target section. One CSS property, applied to the right element, enables it across your entire site.

The scroll-behavior property

scroll-behavior: smooth on the <html> element tells the browser to animate all scroll operations — including anchor link navigation — instead of snapping instantly.

html {
  scroll-behavior: smooth;
}

This single rule is all you need. It applies to every anchor link on the page automatically.

Setting it in Site Designer

  1. Open the Outline pane

    Click the Outline icon in the toolbar to open the element tree.

  2. Select the html element

    Click <html> at the very top of the Outline tree. If it’s not visible, scroll to the top of the pane.

  3. Search for scroll-behavior

    In the Style pane, click into the property search field and type scroll-behavior.

  4. Set the value to smooth

    Select smooth from the dropdown. The change applies immediately.

Smooth scroll only works when your links point to elements by ID. To create an anchor link:

  1. Give the target section an ID. Select the target element and set its id attribute in the Inspector — for example, id="contact".
  2. Point a link to that ID. Select a button or link element. Set its href to #contact.

When a user clicks the link, the browser smoothly scrolls to the element with id="contact".

Accounting for a sticky navigation bar

If you have a sticky header navigation, the scrolled-to section will slide behind it. The section heading appears hidden. Fix this with scroll-margin-top on the target element.

scroll-margin-top adds invisible margin above the target specifically for scroll calculations — it doesn’t affect the layout’s normal spacing.

Set scroll-margin-top on each scroll target equal to the height of your sticky nav. If your nav is 80 px tall:

#contact, #about, #services {
  scroll-margin-top: 80px;
}

In Site Designer, select the target element, search for scroll-margin-top in the Style pane, and set the value.

prefers-reduced-motion

Some users configure their operating system to reduce motion because smooth scrolling can cause discomfort or motion sickness. Site Designer’s default global CSS includes a prefers-reduced-motion media query that overrides scroll-behavior: smooth with scroll-behavior: auto for those users:

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

This means enabling smooth scroll is both a visual enhancement and an accessible one — users who need it get instant scrolling, everyone else gets the polished animation.