Learn how to Add a Scroll To Top Button In Next Tailwind App |AI Fascinates

Learn how to Add a Scroll To Top Button In Next Tailwind App

Hi Code Chasers!

In this article, I will create a reusable component in Next.js Tailwind app that that will help you to reach op of every long data pages with a smooth scroll behaviour.

What we'll be building:

Next Js React Js Reusable Component
Tailwind Css
How To use it in App

First Import React and hooks

import React from 'react'
import { useEffect, useState } from "react";

And then make Scroll To Top Button Hidden in the beginning with useState variables.

// The scroll-to-top button is hidden at the beginning
  const [showTopButton, setShowTopButton] = useState(false);

useEffect function follows the window page offset position and resets showTopButton.

useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.pageYOffset > 300) {
        setShowTopButton(true);
      } else {
        setShowTopButton(false);
      }
    });
  }, []);

Set the top of screen to 0 and assign a smooth scroll behaviour to constant scrollToTop.

// This function will scroll the window to the top 
 const scrollToTopScreen = () => {
   window.scrollTo({
     top: 0,
     behavior: 'smooth' // for smoothly scrolling
   });
 };

This Tailwind css classes help to design button and it displays only if widow pageoffset is greater than 300 px.


return (
    <div>
       {showTopButton && (
        <button onClick={scrollToTopScreen} type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block fixed bottom-0 p-3 bg-gray-500 text-white font-medium text-xs leading-tight uppercase shadow-md hover:bg-slate-500 hover:shadow-lg focus:bg-slate-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-stone-600 active:shadow-lg transition duration-150 ease-in-out bottom-5 right-5 animate-bounce" id="btn-back-to-top">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" className="w-4 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path></svg>
        </button>
      )}
    </div>
  )

How To use This Code As A Component

Create a component under the components folder in the root naming ScrollToTop.js and copy paste the below code.

import React from 'react'
import { useEffect, useState } from "react";

function scollToTop() {
  // The scroll-to-top button is hidden in top of the page and at start
  const [showTopButton, setShowTopButton] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.pageYOffset > 300) {
        setShowTopButton(true);
      } else {
        setShowTopButton(false);
      }
    });
  }, []);

   const scrollToTopScreen = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // helps smooth scrolling
    });
  };
  return (
    <div>
       {showTopButton && (
        <button onClick={scrollToTopScreen} type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" className="inline-block fixed bottom-0 p-3 bg-gray-500 text-white font-medium text-xs leading-tight uppercase shadow-md hover:bg-slate-500 hover:shadow-lg focus:bg-slate-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-stone-600 active:shadow-lg transition duration-150 ease-in-out bottom-5 right-5 animate-bounce" id="btn-back-to-top">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" className="w-4 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path></svg>
        </button>
      )}
    </div>
  )
}

export default ScollToTop

Import Component in _app.js

import ScollToTop from '../components/ScrollToTop';

And use as component.

 <ScollToTop />

Happy To Share This Short Simple Component Snippet With You. Will Come Soon With Another Joy Piece. Until then Hope a Passionate Chase After Codes. With Love💜 Nimble