DEV Community

Cover image for Scroll to top(Back to top) - React and MaterialUI
Julia Pottinger
Julia Pottinger

Posted on

Scroll to top(Back to top) - React and MaterialUI

The Scroll To Top button is a very helpful navigation tool that brings the user to the top of a page without them having to scroll all the way up. On a blog it is very useful. In this tutorial I will show you how to implement this feature with React and MaterialUI.

Top comments (7)

Collapse
 
vincentsuriani profile image
vincentSuriani

Thank you very much. This solves the error of findDomNode deprecated while using the material UI example BackToTop from there documents . It was a bothersome error.

Collapse
 
ailuj876 profile image
Julia Pottinger

Awesome. That is great to hear

Collapse
 
vincentsuriani profile image
vincentSuriani

Yeah it was easier I guess your way rather than using const Transition = React.forwardRef(function Transition(props, ref) {
return ;}); to make the fix (for material ui's back to top example) which I think would have worked because findDomNode is deprecated but after using a forward ref the error did disappear on other elements. Material UI i think is slowly fixing this or at least showing how to fix in docs but some things still show that annoying error so you have to put forward ref on a bunch of things. Beats shutting off strict mode though.

Collapse
 
mohamedabdelrhmaneltahawy profile image
Mohamed Eltahawy

thank you it's easy !

Collapse
 
ksengine profile image
Kavindu Santhusa
Collapse
 
mursalfk profile image
Mursal Furqan Kumbhar

How can we implement this SHOWBELOW thing in a class component?

Collapse
 
nikostsigkros profile image
Nikolaos Tsigkros

That was pretty useful! Thank you so much!