Back to top V2

Show Preview
Back to top V2

About Back to top V2

Live Preview

Grab more components for free

Back To Top is a clean, customizable scroll-to-top button that appears after a defined scroll distance and smoothly returns visitors to the top of the page or a specific section. Choose your icon, colors, placement, shape, border, and motion directly from the Framer property panel.

Features:

  • Appears after a custom scroll distance

  • Smooth or instant scrolling

  • Scrolls to the page top or a custom section

  • Lucide and Phosphor icon support

  • Custom icon size and stroke

  • Left or right positioning

  • Adjustable offsets and z-index

  • Custom hover states

  • Optional border

  • Spring-based hover and press motion

  • Static-render optimized for Framer

How It Works

The button stays hidden until the visitor scrolls past your chosen threshold. Once visible, clicking it smoothly scrolls back to the top of the page or to a custom section using its HTML ID. You can choose smooth or instant scrolling and customize its hover, icon, placement, and motion behavior from the Framer panel.