Scroll To Top Button

Back to Top Button

A customizable, scroll-aware Back to Top button for Framer, featuring an optional Rocket Boost effect that adds dynamic vertical speed lines as visitors return to the top of the page.

The button can stay visible at all times or automatically appear after the visitor scrolls a chosen distance. Clicking it smoothly scrolls the page to the top, with optional haptic feedback on supported mobile devices and an animated burst of speed lines for a more dynamic experience.

Features

• Scroll-aware visibility — Show always or reveal after a custom scroll distance.

• Smooth scroll to top — Returns visitors to the top with a polished transition.

• Rocket Boost effect — Adds animated vertical speed lines when returning to the top.

• Customizable speed lines — Adjust line count, intensity, width, duration, direction, and color.

• Solid, gradient & mixed colors — Customize the speed-line appearance with different color modes.

• Streak gravity controls — Enable accelerating or decelerating motion for the animated speed lines.

• Fully customizable appearance — Configure background, text, hover states, borders, and corner radius.

• Custom typography — Use Framer's Font control to match your website.

• Flexible spacing — Independently control horizontal and vertical padding.

• Hover interactions — Custom hover colors and subtle movement.

• Press interaction — Responsive scale feedback when pressed.

• Text underline — Optional underline with customizable color, thickness, offset, and hover color.

• Haptic feedback — Optional single, double, or triple vibration patterns with adjustable intensity on supported devices.

• Responsive & lightweight — Responsive speed-line scaling, reduced-motion support, and cleanup of animation resources.

• Framer Property Controls — Customize the component directly from the right-side panel.