We are going to create a React button component that when clicked, the page smoothly scrolls back to the top.

Here is the simple concept to achieve this.

  1. The scroll to top button is positioned at the bottom-right of the screen and hidden by default
  2. When we scroll to a specific viewport, the button is visible
  3. When the user clicks the button, it scrolls back to the top of the page

Easy. Huh?

We will create a smooth scroll to the top button in react using React Class Component and React functional component with react hooks.

Before we dive in, here is the working example.

Scroll to top using React Class Component

Okay. Let's set-up our component first-

import React, { Component } from "react";

export default class ScrollToTop extends Component {
  constructor(props) {

  }

  componentDidMount() {

  }

  toggleVisibility() {

  }

  scrollToTop() {

  }

  render() {
    return (
      <div className="scroll-to-top">
          <div>
           
          </div>
      </div>
    );
  }
}

We are going to use the react lifecycle method componentDidMount() with a few other methods to achieve this. 

Here are the steps to create our scroll to top button React component - 

Step 1: constructor()

A method that is fired before the component is mounted, that handles our initial setup. This is the first thing that gets called. Here, we set the visibility state of our button to false.

constructor(props) {
    super(props);
    this.state = {
      is_visible: false
    };
  }

Step 2: componentDidMount()

A lifecycle method that is invoked after our component is rendered for the first time. 

componentDidMount() {
    var scrollComponent = this;
    document.addEventListener("scroll", function(e) {
      scrollComponent.toggleVisibility();
    });
  }

Step 3: toggleVisibility()

This method checks the scroll position and updates the state. When the page is scroll to a specific position, say 300px the visibility state of our button changed to true. 

toggleVisibility() {
    if (window.pageYOffset > 300) {
      this.setState({
        is_visible: true
      });
    } else {
      this.setState({
        is_visible: false
      });
    }
  }

Step 4: scrollToTop()

And, this method just scrolls the page back to the top smoothly.

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

Step 5: Render()

Finally, we need to apply all that to our button element to render. I have used SVG icon button for this.

.
.
.
render() {
    const { is_visible } = this.state;
    return (
      <div className="scroll-to-top">
        {is_visible && (
          <div onClick={() => this.scrollToTop()}>
            <img src='https://i.postimg.cc/44Ytsk8Z/top-arrow-emoj.png' alt='Go to top'/>
          </div>
        )}
      </div>
    );
  }
}
.
.
.

Scroll to top using React functional Component and React hook

React Hooks introduced in version 16.8. Hooks drastically reduced lines of code and made it easy to reuse stateful logic between components.

Let's use react hooks to make the Scroll to top arrow button.

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

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

  // Show button when page is scorlled upto given distance
  const toggleVisibility = () => {
    if (window.pageYOffset > 300) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };

  // Set the top cordinate to 0
  // make scrolling smooth
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

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

  return (
    <div className="scroll-to-top">
      {isVisible && 
        <div onClick={scrollToTop}>
          <img src='https://i.postimg.cc/44Ytsk8Z/top-arrow-emoj.png' alt='Go to top'/>
        </div>}
    </div>
  );
}

That is all we need. We have removed constructor() and replaced React Lifecycle Methods with Hooks.

Our Scroll to top(Back to top) functional component with react hooks is ready.

Easy as pie. Now import this component globally in the header or footer component.

#React #React Component #Code Snippets