Introduction:

Scrolling to the top of a webpage is a common functionality that many websites offer to enhance user experience. It allows users to quickly navigate to the top of the page without the need to manually scroll back up. In React, creating a scroll to top component is relatively straightforward, and it can be a valuable addition to any website. In this blog post, we'll explore how to create a scroll to top component in React and look at some of the benefits it can provide for your website's user experience. Whether you're new to React or a seasoned pro, read on to learn how to add this useful functionality to your website.

import React, { useState, useEffect } from "react";
import "./scrollToTop.css"


function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    if (window.pageYOffset > 300) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };

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

  useEffect(() => {
    window.addEventListener("scroll", toggleVisibility);
    return () => {
      window.removeEventListener("scroll", toggleVisibility);
    };
  }, []);

  return (
    <div >
      {isVisible && (
        <div className="scroll-to-top" onClick={scrollToTop}>
          <FontAwesomeIcon icon={faArrowUp} className="top-btn-icon" />
        </div>
      )}
    </div>
  );


}

export default ScrollToTop;

css code:

.scroll-to-top{
    background-color: #1c034f ;
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    color: white;
    border-radius: 110px;
    z-index: 888;
    cursor: pointer;
    padding: 9px;
    font-size: 2rem;
}


.scroll-to-top .top-btn-icon{
    animation: mymove 1.2s linear infinite alternate-reverse;
    position: relative;
  }

@keyframes mymove {
    0% {
        transform: translateY(-0.5rem);

    }

    100% {
        transform: translateY(0.80rem);
    }
}

In this example, we use the useState hook to keep track of the visibility of the scroll-to-top component. We initially set it to false. We then define a toggleVisibility function that checks the pageYOffset property of the window object. If the user has scrolled down more than 300 pixels, we set the isVisible state to true. Otherwise, we set it to false.

We also define a scrollToTop function that scrolls the window back to the top of the page when the user clicks on the scroll-to-top component.

We use the useEffect hook to add an event listener for the scroll event when the component mounts. We then remove the event listener when the component unmounts.

Finally, we return the scroll-to-top component. We conditionally render the component based on the value of isVisible. If it's true we render the component with a clickable div that calls the scrollToTop function when clicked. Otherwise, we don't render anything.

Conclusion:

In conclusion, adding a scroll to top button to your website can provide numerous benefits for your users. By allowing for easy navigation, saving time, and improving the overall user experience, a scroll to top button can help increase user engagement and reduce bounce rates. Additionally, it can make your website more accessible to users with disabilities and mobile-friendly for those using small screens and touch devices. So, if you want to enhance the usability and accessibility of your website, consider adding a scroll to top button today.

Happy Coding.