Skip to content
IntelliHelper logo

Intelli UI

NavigationLiquid Glass

Scroll To Top

Floating glass button that appears after scrolling. Preview live, copy the source, or install with the CLI into your Next.js project.
More navigation
npx @intellihelper/cli@latest add scroll-to-top

Scroll helper

About this component

Scroll To Top is part of Navigation. Floating glass button that appears after scrolling.

Install with npx @intellihelper/cli@latest add scroll-to-top. Files land in your project so you can customize styles, variants, and behavior without a locked package.

Prefer AI-assisted install? Use the agent plugin or the MCP server.

When to use Scroll To Top

Use when

  • Use Scroll To Top when floating glass button that appears after scrolling.
  • App chrome: sidebars, menus, pagination, scroll helpers.
  • Orienting users inside multi-section product UIs.

Avoid when

  • In-page CTAs that should be buttons rather than nav items.
  • Single-page marketing sections better served by anchor links.

Accessibility notes

  • Mark current page with aria-current where applicable.
  • Sidebars and menus should be keyboard navigable and announce expansion state.

Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.

Composition tips

  • Pair sidebar with main content landmarks (nav + main).
  • Use pagination for large lists; avoid infinite scroll without an accessible alternative.

FAQ

Related components

View all navigation →