React: Scroll To The Top of The Page

  1. The scroll to top button is positioned at the bottom-right of the screen and hidden by default
  2. When the user 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

Scroll to top using React functional Component and React hook

There are different ways and methods to achieve it, but i’m writing this article base on my own understanding and methods that works for me. I’ll also be using antd package for the icon. Feel free to create other methods that works for you.

scroll-to-top.css with animation property
import antd to App.js
  1. useState: useState accepts the initial value of the state variable which is a boolean set to false in this case. The current value of the state has been called visible and a method that can update the state variable has been called as setVisible.
scrollToTop method
render method



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abidemi Animashaun

Abidemi Animashaun


Hi everyone! I’m a web full stack developer. I write JavaScript and Php with exemplary knowledge in Reactjs, Node.js, Laravel and Nest.js.