text: import Fab from "@material-ui/core/Fab";
  import { makeStyles } from "@material-ui/core/styles";
  import useScrollTrigger from "@material-ui/core/useScrollTrigger";
  import Zoom from "@material-ui/core/Zoom";
  import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
  import React from "react";
  
  const useStyles = makeStyles((theme) => ({
    root: {
      position: "fixed",
      bottom: theme.spacing(8),
      right: theme.spacing(2),
    },
  }));
  
  function ScrollTop(props) {
    const classes = useStyles();
    const trigger = useScrollTrigger({
      disableHysteresis: true,
      threshold: 100,
    });
  
    const handleClick = (event) => {
      const anchor = (event.target.ownerDocument || document).querySelector(
        "#back-to-top-anchor"
      );
  
      if (anchor) {
        anchor.scrollIntoView({ behavior: "smooth", block: "center" });
      }
    };
  
    return (
      <Zoom in={trigger}>
        <div onClick={handleClick} role="presentation" className={classes.root}>
          <Fab color="secondary" size="small" aria-label="scroll back to top">
            <KeyboardArrowUpIcon />
          </Fab>
        </div>
      </Zoom>
    );
  }
  
  export default ScrollTop;
  