How to add a “scroll-to-top” button in React and Nextjs

Ever wondered why Nextjs doesn’t have a native “Scroll-to-top” button?

Yeah, me too.

I recently added a “Scroll to Top” button to my Next.js project and wanted to share how I did it.

It’s a simple addition that makes navigating long pages much easier.

What it is

A floating button that appears when you scroll down the page and allows users to quickly return to the top with a single click. Built with shadcn/ui components for a clean look.

Why it’s useful

• Makes long pages more navigable
• Simple implementation with no extra packages
• Fits naturally with your existing design
• Improves user experience with minimal effort

How to implement it

You’ll need:

• A Next.js (or react) project
• Shadcn Button component
• Lucide-react for the icon

1. Create the component

2. Add it to your layout

Customization options

• Adjust the scroll threshold (currently set to 300px)
• Reposition the button by changing the fixed position classes
• Use a different icon or add text
• Change the button style using shadcn variants
• Add transition effects for appearance/disappearance

This in one of those small additions to your websites or webapp that significantly improves navigation, especially on content-heavy pages.