ScrollTop
Provides a quick way for users to scroll back to the top of long pages.
lucide-reactScroll Top Demo
Scroll down the main page to display the ScrollTop button. Click it to smoothly return to the top.
1import * as React from 'react'
2
3import { ScrollTop } from '@/components/ui/scroll-top'
4
5export function ScrollTopDemo() {
6 return (
7 <div className="relative space-y-6 p-6">
8 <p className="text-xl font-semibold text-black">Scroll Top Demo</p>
9 <p className="text-gray max-w-prose">
10 Scroll down the main page to display the ScrollTop button. Click
11 it to smoothly return to the top.
12 </p>
13
14 <ScrollTop />
15 </div>
16 )
17}
18Installation
Install the following dependencies:
Examples
Particular parent
Latest Tech & World News
Scroll down to explore recent updates from around the world. Click the button that appears to instantly return to the top.
News #1: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #2: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #3: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #4: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #5: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #6: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #7: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #8: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #9: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #10: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #11: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
News #12: Global markets showed mixed reactions today as technology companies announced new advancements in artificial intelligence, renewable energy, and digital security. Analysts suggest that the coming weeks may bring major updates as governments and corporations continue adapting to rapid innovations.
1import * as React from 'react'
2
3import { ScrollTop } from '@/components/ui/scroll-top'
4
5export function ScrollTopParent() {
6 return (
7 <div className="relative min-h-[1000px] space-y-6 p-6">
8 <p className="text-xl font-semibold text-black">
9 Latest Tech & World News
10 </p>
11 <p className="text-gray max-w-prose">
12 Scroll down to explore recent updates from around the world.
13 Click the button that appears to instantly return to the top.
14 </p>
15
16 <div className="space-y-4">
17 {Array.from({ length: 12 }).map((_, i) => (
18 <p key={i} className="text-gray">
19 <strong>News #{i + 1}:</strong> Global markets showed
20 mixed reactions today as technology companies announced
21 new advancements in artificial intelligence, renewable
22 energy, and digital security. Analysts suggest that the
23 coming weeks may bring major updates as governments and
24 corporations continue adapting to rapid innovations.
25 </p>
26 ))}
27 </div>
28
29 <ScrollTop target="parent" />
30 </div>
31 )
32}
33Custom button
Travel Stories & Destination Highlights
Scroll down to explore a series of travel experiences from around the globe. When you're ready to return, click the button below to jump back to the top.
Destination #1: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #2: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #3: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #4: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #5: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #6: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #7: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #8: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #9: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #10: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #11: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
Destination #12: From the vibrant markets of Marrakech to the peaceful fjords of Norway, travelers continue to share unforgettable stories. Whether it's exploring ancient temples, tasting local cuisines, or witnessing breathtaking sunsets, each journey offers a unique glimpse into the culture and beauty of the world.
1import * as React from 'react'
2
3import { ScrollTop } from '@/components/ui/scroll-top'
4
5export function ScrollTopCustom() {
6 return (
7 <div className="relative min-h-[1350px] space-y-6 p-6">
8 <p className="text-xl font-semibold text-black">
9 Travel Stories & Destination Highlights
10 </p>
11 <p className="text-gray max-w-prose">
12 Scroll down to explore a series of travel experiences from
13 around the globe. When you're ready to return, click the
14 button below to jump back to the top.
15 </p>
16
17 <div className="space-y-4">
18 {Array.from({ length: 12 }).map((_, i) => (
19 <p key={i} className="text-gray">
20 <strong>Destination #{i + 1}:</strong> From the vibrant
21 markets of Marrakech to the peaceful fjords of Norway,
22 travelers continue to share unforgettable stories.
23 Whether it's exploring ancient temples, tasting
24 local cuisines, or witnessing breathtaking sunsets, each
25 journey offers a unique glimpse into the culture and
26 beauty of the world.
27 </p>
28 ))}
29 </div>
30
31 <ScrollTop
32 target="parent"
33 className="bg-primary/40 w-32 rounded-md text-black shadow-lg hover:bg-black hover:text-white"
34 >
35 Scroll To Top
36 </ScrollTop>
37 </div>
38 )
39}
40API Reference
ScrollTop
| Prop | Type | Default |
|---|---|---|
| target | window,parent | window |
| threshold | number | 200 |
| children | React.ReactNode | - |