import React from 'react' ; import Zoom from '@mui/material/Zoom' ; import useScrollTrigger from '@mui/material/useScrollTrigger' ; import Box from '@mui/material/Box' ; import Fab from '@mui/material/Fab' ; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp' ; const ScrollTop = ( ) => { const trigger = useScrollTrigger ( ) ; const handleClick = ( event ) => { const anchor = ( ( event . target as HTMLDivElement ) . ownerDocument || document ) . querySelector ( '#back-to-top-anchor' ) ; if ( anchor ) { anchor . scrollIntoView ( { behavior : 'smooth' , block : 'center' , } ) ; } } ; return ( < Zoom in = { trigger } > < Box onClick = { handleClick } role = "presentation" sx = { { position : 'fixed' , bottom : 16 , right : 16 , zIndex : 1 } } > < Fab color = "secondary" size = "small" aria - label = "scroll back to top" > < KeyboardArrowUpIcon /> < /Fab> < /Box> < /Zoom>); } ; export default ScrollTop ;