ScrollToTop

Premium

Navigation

Scroll-to-top button with multiple variants, progress indicator, and smooth animations.

Dependencies:

framer-motion

Full

Scroll down to see the button appear

This is some placeholder content to make the page scrollable. The scroll-to-top button will appear after scrolling down.

This is some placeholder content to make the page scrollable. The scroll-to-top button will appear after scrolling down.

This is some placeholder content to make the page scrollable. The scroll-to-top button will appear after scrolling down.

This is some placeholder content to make the page scrollable. The scroll-to-top button will appear after scrolling down.

This is some placeholder content to make the page scrollable. The scroll-to-top button will appear after scrolling down.

default •minimal •circle •pill

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { ScrollToTop } from '@/components/ScrollToTop'

Animated tab navigation with smooth transitions and multiple visual variants.