title: Material ui : Table scroll to top of new page
body: <p>I'm a bit lost on this.</p>
  <p>I already try many settings with scrollTop.
  Let me explain, I'm using material Ui and their pagination stuff with table <a href="https://material-ui.com/components/tables/#sorting-amp-selecting" rel="nofollow noreferrer">documentation here</a>
  so I'm stuck when I click on next set of row( or change page ), I start at the bottom. but I would like to start at the top of every new row.</p>
  <p>If someone can help me and give me an explanation of why, A huge thanks!
  sorry, I'm quite new to React.</p>
  <p>here is my code :</p>
  <pre><code>function DisplayList(props) {
     var rows = [];
     const data = props.data;
     const searchData = props.searchData;
     const setHoverAddress = props.setHoverAddress;
  
     const classes = useStyles1();
  
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(5);
  
     const handleChangePage = (event, newPage) =&gt; {
         setPage(newPage);   
     };
  
     const handleChangeRowsPerPage = (event) =&gt; {
         setRowsPerPage(parseInt(event.target.value, 10));
         setPage(0);
     };
  
  
     data.map((result, index) =&gt; { // WARNING : slice here which limits the number of results: .slice(0, 5)
         const volulme = Math.round(result.volulme);
         const volulme2 = Math.round(result.volulme2);
  
  
         rows.push(
         &lt;div id={index}&gt;
             &lt;ListItem 
             alignItems=&quot;flex-start&quot;
             onMouseEnter={e =&gt; {
                 console.log(index);
             }}
             &gt;
                 &lt;Grid container direction=&quot;row&quot; spacing={1}&gt;
                     &lt;Grid item xs={5}&gt;
  
                     {/* &lt;Stage width={150} height={150}&gt;
                         &lt;Layer&gt;
                         &lt;Shape
                             sceneFunc={(context, shape) =&gt; {
                             context.beginPath();
                             context.moveTo(20, 10);
                             context.lineTo(120, 80);
                             context.lineTo(120, 140);
                             context.lineTo(22, 140);
                             context.closePath();
                             // (!) Konva specific method, it is very important
                             context.fillStrokeShape(shape);
                             }}
                             fill=&quot;#00D2FF&quot;
                             stroke=&quot;black&quot;
                             strokeWidth={2}
                         /&gt;
                         &lt;/Layer&gt;
                     &lt;/Stage&gt; */}
  
                     &lt;/Grid&gt;
                     &lt;Grid item xs={7}&gt;
                     &lt;ListItemText
                     primary={
                     }
                     secondary={
                         &lt;React.Fragment&gt;
                         &lt;Typography
                             component=&quot;span&quot;
                             variant=&quot;body2&quot;
                             display=&quot;inline&quot;
                             color=&quot;textPrimary&quot;
                         &gt;
                             Solid2 : {volulme2}
                         &lt;/Typography&gt;
                         &lt;/React.Fragment&gt;
                     }
                     /&gt;
                     &lt;ListItemText
                     secondary={
                         &lt;React.Fragment&gt;
                         &lt;Typography
                             component=&quot;span&quot;
                             variant=&quot;body2&quot;
                             display=&quot;inline&quot;
                             color=&quot;textPrimary&quot;
                         &gt;
                             Solid : {volulme}
                         &lt;/Typography&gt;
                         &lt;/React.Fragment&gt;
                     }
                     /&gt;
                     &lt;FormControlLabel
                     control={
                         &lt;Checkbox icon={&lt;FavoriteBorder /&gt;} 
                         checkedIcon={&lt;Favorite /&gt;} 
                         color=&quot;primary&quot;
                         onClick={(e) =&gt; {
                             if (e.target.checked) {
                                 addFavourite(parc_id, 1)
                             } else {
                                 removeFavourite(parc_id, 1)
                             }
                         }}
                         name=&quot;checkedH&quot; /&gt;
                     }
                         label=&quot;Enregistrer&quot;
                     /&gt;
                     &lt;/Grid&gt;
                 &lt;/Grid&gt;
             &lt;/ListItem&gt;
         &lt;/div&gt;
         )
     })
  
  
     return (
             &lt;Table className={classes.table} aria-label=&quot;custom pagination table&quot;&gt;
                 &lt;TableBody&gt;
                 {(rowsPerPage &gt; 0
                     ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                     : rows
                 ).map((row) =&gt; (
                     &lt;TableRow key={index}&gt;
                         &lt;TableCell component=&quot;th&quot; scope=&quot;row&quot;&gt;
                             {row}
                         &lt;/TableCell&gt;
                     &lt;/TableRow&gt;
                 ))}
                 &lt;/TableBody&gt;
                 &lt;TableFooter&gt;
                     &lt;TableRow&gt;
                         &lt;TablePagination
                         rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
                         colSpan={3}
                         count={rows.length}
                         rowsPerPage={rowsPerPage}
                         page={page}
                         SelectProps={{
                             inputProps: { 'aria-label': 'rows per page' },
                             native: true,
                         }}
                         onChangePage={handleChangePage}
                         onChangeRowsPerPage={handleChangeRowsPerPage}
                         ActionsComponent={TablePaginationActions}
                         /&gt;
                     &lt;/TableRow&gt;
                 &lt;/TableFooter&gt;
             &lt;/Table&gt;
     )
  }
  </code></pre>