title: How do I add AppBar with Back to Top button from Material UI for React in my App?
body: <p>In the documentation of Material UI, I found this code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import PropTypes from 'prop-types';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import useScrollTrigger from '@material-ui/core/useScrollTrigger';
  import Box from '@material-ui/core/Box';
  import Container from '@material-ui/core/Container';
  import Fab from '@material-ui/core/Fab';
  import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
  import Zoom from '@material-ui/core/Zoom';
  
  const useStyles = makeStyles((theme) =&gt; ({
      root: {
          position: 'fixed',
          bottom: theme.spacing(2),
          right: theme.spacing(2),
      },
  }));
  
  function ScrollTop(children) {
      const classes = useStyles();
      const trigger = useScrollTrigger({
          target: window ? window() : undefined,
          disableHysteresis: true,
          threshold: 100
      });
  
      const handleClick = (event) =&gt; {
          const anchor = (event.target.ownerDocument || document).querySelector('#back-to-top-anchor');
          if (anchor) {
              anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
          }
      };
      return (&lt;Zoom in={trigger}&gt;
          &lt;div onClick={handleClick} role="presetation" className={classes.root}&gt;
              {children}
          &lt;/div&gt;
      &lt;/Zoom&gt;);
  }
  export default function BackToTop(children) {
      return (
          &lt;React.Fragment&gt;
              &lt;CssBaseline /&gt;
              &lt;AppBar&gt;
                  &lt;Toolbar&gt;
                      &lt;Typography variant="h6"&gt;Scroll to see button&lt;/Typography&gt;
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
              &lt;Toolbar id="back-to-top-anchor" /&gt;
              &lt;Container&gt;
                  &lt;Box my={2}&gt;
                      {[...new Array(100)]
                          .map(
                              () =&gt; `Cras mattis consectetur purus sit amet fermentum.
                                      Cras justo odio, dapibus ac facilisis in, egestas eget quam.
                                      Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                                      Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
                          )
                          .join('\n')}
                  &lt;/Box&gt;
              &lt;/Container&gt;
              &lt;ScrollTop {...children}&gt;
                  &lt;Fab color="secondary" size="small" aria-label="scroll back to top"&gt;
                      &lt;KeyboardArrowUpIcon /&gt;
                  &lt;/Fab&gt;
              &lt;/ScrollTop&gt;
          &lt;/React.Fragment&gt;
      );
  }
  </code></pre>
  
  <p>There was said that this code is top bar, which will draw  <code>Back to top</code> button. But I don't understand what should I pass as <code>children</code> to <code>BackToTop</code> function. Can anyone help me?<br/>
  P.S Code also includes content, that is stored inside <code>Box</code> element, it is just for testing. If I understand purpose of <code>children</code> parameter  right, I should have ability to make <code>BackToTop</code> function independent of any parameters.</p>