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.js
scroll-to-top.css
scroll-to-top.css with animation property
scroll-to-top.css
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.
useState
useEffect
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

3 Followers

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.