Back to Motion Prompt examples
Landing page & web effects · #21
Smooth scroll
In-page links glide to their target instead of jumping. Clicking "Pricing" in the menu glides the page down to the pricing section; the up arrow at the bottom right glides it back to the top.
Loading, navigation & ambient loopssmooth-scrollscroll-behavioranchor-linkin-page-linkback-to-topnavigation
Full motion specification
How the movement works
Use it when a menu or table of contents jumps within the same page, so the reader sees where they went.
- 01At 0.9 s the "Pricing" menu item is clicked; scroll goes 0→296 px over 0.95–2.0 s (1.05 s, cubic ease-in-out).
- 02Stop position = top of the pricing section (330 px) − fixed header height (34 px).
- 03Once scroll passes 60 px, a round back-to-top button (radius 15) fades in over the next 40 px at the bottom right.
- 04At 3.1 s that button is clicked; scroll goes 296→0 over 3.15–4.2 s (cubic ease-in-out).
- 05While the pricing section is in view, "Pricing" in the menu turns orange.
Prompt
Make the menu's in-page links smooth scroll, stopping below the fixed header.