DEV Community

How to create a Scroll to Top Button with React

Silvia España Gil on August 24, 2021

Hola Mundo! So this is my first coding post and am really excited about it 👩‍🎤✨ Thing is that, when I was creating my Portfolio I de...

Read full post

Mike Talbot ⭐ • Aug 24 '21

Really nice post :)

One thing - your useEffect(()=>window.addListener(... is being called on every re-render so you will end up with lots of them added. You should return a function to remove the listener so it tidies up and possibly rewrite things a bit so you can actually only do it on mount/unmount with deps of []. Care needs to be taken with that though because the you need to be sure that the handler can work in cases when it wasn't added on the same render (it's a closure on the time the deps change).

Silvia España Gil • Aug 24 '21

Thank you very much Mike, I'll put at eye on it and see if I find a solution so it works in every scenario!

hassanKhademi • Aug 25 '21

useEffect(() => {
window.addEventListener("scroll", handleVisibleButton);
},[]);
For fix issue this way is great
execute when component mounting
One listener

Hash • Oct 17 '22

what about removing the listener when unmouning,


useEffect(() => {
const e = window.addEventListener("scroll", handleVisibleButton);

return ()=> window.removeEventListener('scroll',handleVisibleButton);
},[]);

Otto Vector • Jan 23 '22 • Edited

This (I think) more shorter and in one component
No styles info, because it is very hard to qick-understand.
You can Use youre beatiful style.

///////////////////////////////////////////////////
import React, { useEffect, useState } from 'react'
import styles from './go-top-button.module.scss'

const GoTopButton = () => {

const [ showGoTop, setShowGoTop ] = useState( false )

const handleVisibleButton = () => {
    setShowGoTop( window.pageYOffset > 50 )
}

const handleScrollUp = () => {
    window.scrollTo( { left: 0, top: 0, behavior: 'smooth' } )
}

useEffect( () => {
    window.addEventListener( 'scroll', handleVisibleButton )
}, [] )

return (
    <div className={ showGoTop ? '' : styles.goTopHidden } onClick={ handleScrollUp }>
        <button type={'button'} className={ styles.goTop }>
            //use Material Icon
            <span className={ styles.goTopIcon }>expand_less</span>
        </button>
    </div>
)

}

export default GoTopButton