This blog post will show you how to use the ScrollToTopButton component, a React component that renders a button that navigates the website to the top with a smooth animation, in a Next.js 13 project with Tailwind CSS and Framer Motion.

Prerequisites

• Next.js 13
• Tailwind CSS
• Framer Motion

Instructions

1. Create a new Next.js 13 project with Tailwind CSS and Framer Motion. You can do this by running the following commands:

npx create-next-app@latest --ts --use-tailwindcss --use-framer-motion

2. Install the react-icons dependency. This is necessary to use the FaArrowUp icon in the button.

npm install react-icons

3. Create a new file called ScrollToTopButton.jsin the components directory of your project. Paste the following code into the file:

import { motion, useAnimationControls, useScroll } from "framer-motion";
import { FaArrowUp } from "react-icons/fa";
import { useState } from "react";

function ScrollToTopButton() {
  useEffect(() => {
    const toggleVisibility = () => {
      window.scrollY > 500 ? setIsVisible(true) : setIsVisible(false);
    };

    // Listen for scroll events
    window.addEventListener("scroll", toggleVisibility);

    // Clear the listener on component unmount
    return () => {
      window.removeEventListener("scroll", toggleVisibility);
    };
  }, []);

  const [isVisible, setIsVisible] = useState(false);
  const { scrollYProgress } = useScroll();
  const controls = useAnimationControls();

  function scrollToTop() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  useEffect(() => {
    return scrollYProgress.on("change", (latestValue) => {
      if (latestValue > 0.5) {
        controls.start("show");
      } else {
        controls.start("hide");
      }
    });
  }, []);

  return (
    <motion.button
      className={`fixed bottom-10 right-10 z-40 bg-yellow-500 p-5 shadow-sm shadow-amber-800 rounded-full outline-none transition-opacity duration-200 ${isVisible ? "opacity-100" : "opacity-0"}`}
      initial="hide"
      animate={controls}
      onClick={scrollToTop}
    >
      <FaArrowUp size={"18px"} color="white" />
    </motion.button>
  );
}

export default ScrollToTopButton;

4. Import the ScrollToTopButton component into any page where you want to use it. For example, you could add the following code to your pages/index.jsx file:

import ScrollToTopButton from "../components/ScrollToTopButton";

function Index() {
  return (
    <div><ScrollToTopButton /><h1>My Next.js 13 Website</h1><p>This website has a scroll to top button that uses Framer Motion for a smooth animation.</p></div>
  );
}

export default Index;

5. Render the ScrollToTopButton component in your page. This will add a button to your page that will navigate the website to the top when clicked.

Usage

Once you have added the ScrollToTopButton component to your page, you can use it by scrolling down the page and then clicking on the button. The button will navigate the website to the top with a smooth animation.