Scroll to the top of the page after render in react js

Question

I have a problem  which I have no ideas  how to solve  In my react component I display a long list of data and few links at the bottom  After clicking on any of this links I fill in the list with new collection of the links and need to scroll to the top   The problem is - how to scroll to the top after new collection is rendered    use strict       url of this component is    checklistId  sectionId  var React   require  react      Router   require  react-router      sectionStore   require       stores checklist-section-store      function updateStateFromProps       var self   this    sectionStore getChecklistSectionContent       checklistId  this getParams   checklistId      sectionId  this getParams   sectionId      then function  section        self setState         section        componentReady  true                    this setState  componentReady  false        var Checklist   React createClass     mixins   Router State      componentWillMount  function          updateStateFromProps call this           componentWillReceiveProps        updateStateFromProps call this          render  function        if  this state componentReady        return         lt section className  checklist-section  gt           lt header className  section-header  gt   this state section name      lt  header gt           lt Steps steps   this state section steps    gt           lt a href      this getParams   checklistId    this state section nextSection Id   gt            Next Section          lt  a gt         lt  section gt               else                module exports   Checklist

User · Accepted Answer

Since the original solution was provided for very early version of react  here is an update   constructor props        super props      this myRef   React createRef        Create a ref object     componentDidMount       this myRef current scrollTo 0  0      render         return  lt div ref  this myRef  gt  lt  div gt          attach the ref property to a dom element

User · Answer

I m using React Hooks and wanted something re-usable but also something I could call at any time  rather than just after render        utils js export const useScrollToTop    initialScrollState   false    gt      const  scrollToTop  setScrollToTop    useState initialScrollState      useEffect      gt        if  scrollToTop          setScrollToTop false         try           window scroll             top  0            left  0            behavior   smooth                       catch  error            window scrollTo 0  0                       scrollToTop  setScrollToTop       return setScrollToTop       Then to use the hook you can do    import   useScrollToTop   from  utils    const MyPage    props    gt         initialise useScrollToTop with true in order to scroll on page load    const setScrollToTop   useScrollToTop true             return  lt div onClick       gt  setScrollToTop true   gt click me to scroll to top lt  div gt

User · Answer

For Functional components  import React   useRef  from  react   function ScrollingExample  props       create our ref const refToTop   useRef     return    lt h1 ref  refToTop  gt  I wanna be seen  lt  h1 gt     then add enough contents to show scroll on page  lt a onClick      gt       setTimeout      gt    refToTop current scrollIntoView   behavior   smooth       500             gt   Take me to the element  lt a gt

User · Answer

If all want to do is something simple here is a solution that will work for everybody  add this mini function  scrollTop         window scrollTo           top  0          behavior   smooth              call the function as following from the footer of the page   lt a className  scroll-to-top rounded  style   display   inline    onClick  this scrollTop  gt TOP lt  a gt    if you want to add nice styles here is the css   x000D   x000D   scroll-to-top   x000D    position  fixed  x000D    right  1rem  x000D    bottom  1rem  x000D    display  none  x000D    width  2 75rem  x000D    height  2 75rem  x000D    text-align  center  x000D    color   fff  x000D    background  rgba 90  92  105  0 5   x000D    line-height  46px  x000D    x000D   x000D   x000D

User · Answer

You could use something like this  ReactDom is for react 14  Just React otherwise       componentDidUpdate        gt    ReactDom findDOMNode this  scrollIntoView        Update 5 11 2019 for React 16    x000D   x000D    constructor props    x000D      super props  x000D      this childDiv   React createRef   x000D      x000D   x000D    componentDidMount        gt  this handleScroll   x000D   x000D    componentDidUpdate        gt  this handleScroll   x000D   x000D    handleScroll        gt    x000D      const   index  selected     this props x000D      if  index     selected    x000D        setTimeout      gt    x000D          this childDiv current scrollIntoView   behavior   smooth     x000D           500  x000D        x000D      x000D   x000D   x000D

User · Answer

This is what I did  useEffect      gt  ref current scrollTo 0  0    const ref   useRef           return            lt div ref  ref  gt                           lt  div gt

User · Answer

None of the above answers is currently working for me  It turns out that  scrollTo is not as widely compatible as  scrollIntoView   In our App js  in componentWillMount   we added  this props history listen  location  action    gt            setTimeout      gt    document getElementById  root   scrollIntoView   behavior   smooth        777           This is the only solution that is working universally for us  root is the ID of our App  The  smooth  behavior doesn t work on every browser   device  The 777 timeout is a bit conservative  but we load a lot of data on every page  so through testing this was necessary  A shorter 237 might work for most applications

User · Answer

This code will cause a smooth behavior on the scroll    lt div onClick       gt       ReactDOM findDOMNode this headerRef         scrollIntoView  behavior   smooth                           className  go-up-button   gt   lt  div gt    You can pass other parameters inside the scrollIntoView   Following syntax can be used   element scrollIntoView    element scrollIntoView alignToTop      Boolean parameter element scrollIntoView scrollIntoViewOptions      Object parameter   alignToTop Optional     Is a Boolean value   If true  the top of the element will be aligned to the top of the visible area of the scrollable ancestor  Corresponds to scrollIntoViewOptions   block   start   inline   nearest    This is the default value  If false  the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor  Corresponds to scrollIntoViewOptions   block   end   inline   nearest      scrollIntoViewOptions Optional     Is an Object with the following properties    behavior  Optional     Defines the transition animation      One of  auto    instant   or  smooth   Defaults to  auto    block  Optional     One of  start    center    end   or  nearest   Defaults to  center    inline  Optional     One of  start    center    end   or  nearest   Defaults to  nearest     More details can be found here  MDN docs

User · Answer

Here s yet another approach that allows you to choose which mounted components you want the window scroll position to reset to without mass duplicating the ComponentDidUpdate ComponentDidMount    The example below is wrapping the Blog component with ScrollIntoView    so that if the route changes when the Blog component is mounted  then the HOC s ComponentDidUpdate will update the window scroll position   You can just as easily wrap it over the entire app  so that on any route change  it ll trigger a window reset   ScrollIntoView js  import React    Component   from  react   import   withRouter   from  react-router    export default WrappedComponent   gt      class ResetWindowScroll extends Component       componentDidUpdate    prevProps    gt          if this props location     prevProps location  window scrollTo 0 0              render        gt   lt WrappedComponent     this props    gt        return withRouter ResetWindowScroll       Routes js  import React from  react   import   Route  IndexRoute   from  react-router    import App from     components App   import About from     components pages About   import Blog from     components pages Blog  import Index from     components Landing   import NotFound from     components navigation NotFound   import ScrollIntoView from     components navigation ScrollIntoView     export default        lt Route path     component  App  gt           lt IndexRoute component  Index    gt           lt Route path   about  component  About    gt            lt Route path   blog  component  ScrollIntoView Blog     gt           lt Route path     component  NotFound    gt       lt  Route gt         The above example works great  but if you ve migrated to react-router-dom  then you can simplify the above by creating a HOC that wraps the component    Once again  you could also just as easily wrap it over your routes  just change componentDidMount method to the componentDidUpdate method example code written above  as well as wrapping ScrollIntoView with withRouter    containers ScrollIntoView js  import   PureComponent  Fragment   from  react    class ScrollIntoView extends PureComponent     componentDidMount        gt  window scrollTo 0  0      render        gt  this props children    export default ScrollIntoView    components Home js  import React from  react   import ScrollIntoView from     containers ScrollIntoView    export default      gt       lt ScrollIntoView gt       lt div className  container  gt         lt p gt          Sample Text        lt  p gt       lt  div gt     lt  ScrollIntoView gt

User · Answer

Looks like all the useEffect examples dont factor in you might want to trigger this with a state change  const  aStateVariable  setAStateVariable    useState false    const handleClick        gt       setAStateVariable true      useEffect      gt      if aStateVariable     true        window scrollTo 0  0          aStateVariable

User · Answer

All of the above didn t work for me - not sure why but    componentDidMount        document getElementById  HEADER   scrollIntoView        worked  where HEADER is the id of my header element

User · Answer

The page that appears after clicking  just write into it    componentDidMount         window scrollTo 0  0

User · Answer

I tried everything  but this is the only thing that worked   useLayoutEffect      gt      document getElementById  quot someID quot   scrollTo 0  0

User · Answer

Hook solution    Create a ScrollToTop hook         import   useEffect   from  react       import   withRouter   from  react-router-dom        const ScrollToTop      children  location    pathname        gt          useEffect      gt            window scrollTo             top  0            left  0            behavior   smooth                        pathname           return children    null              export default withRouter ScrollToTop       Wrap your App with it         lt Router gt           lt ScrollToTop gt              lt App   gt           lt  ScrollToTop gt       lt  Router gt        Documentation   https   reacttraining com react-router web guides scroll-restoration

User · Answer

I m using react-router ScrollToTop Component which code described in react-router docs  https   reacttraining com react-router web guides scroll-restoration scroll-to-top  I m changing code in single Routes file and after that no need of change code in every component   Example Code -   Step 1 - create ScrollToTop js Component  import React    Component   from  react   import   withRouter   from  react-router    class ScrollToTop extends Component     componentDidUpdate prevProps        if  this props location     prevProps location          window scrollTo 0  0               render         return this props children        export default withRouter ScrollToTop    Step 2 - In App js file  add ScrollToTop Component after  lt Router  const App        gt       lt Router gt       lt ScrollToTop gt         lt App  gt       lt  ScrollToTop gt     lt  Router gt

User · Answer

In React Routing there is the problem that if we redirect to the new route  then it won t automatically take you to the top of the page   Even I did have the same issue   I just added the single line to my component and it worked like butter    componentDidMount         window scrollTo 0  0       Refer  react training

User · Answer

I had the same for problem for a while  Adding  window scrollTo 0  0  to every page is painful and redundant  So i added a HOC which will wrap all my routes and it will stay inside BrowserRouter component    lt ScrollTop gt       lt Routes   gt     lt  ScrollTop gt   Inside ScrollTopComponent we have the following  import React    useEffect   from  quot react quot   import   useLocation   from  quot react-router-dom quot    const ScrollTop    props    gt      const   children     props     const location   useLocation       useEffect      gt        window scrollTo 0  0         location       return  lt main gt  children  lt  main gt       export default ScrollTop

User · Answer

This could  and probably should  be handled using refs           you can use ReactDOM findDOMNode as an  escape hatch  but we don t recommend it since it breaks encapsulation and in almost every case there s a clearer way to structure your code within the React model     Example code   class MyComponent extends React Component       componentDidMount             this  div scrollTop   0            render             return  lt div ref   ref    gt  this  div   ref    gt

User · Answer

Using Hooks in functional components   assuming the component updates when theres an update in the result props  import React    useEffect   from  react    export const scrollTop     result     gt      useEffect      gt        window scrollTo 0  0         result

User · Answer

If you are doing this for mobile  at least with chrome  you will see a white bar at the bottom   This happens when the URL bar disappears  Solution      Change the css for height min-height  100  to height min-height  100vh    Google Developer Docs

User · Answer

I ran into this issue building a site with Gatsby whose Link is built on top of Reach Router  It seems odd that this is a modification that has to be made rather than the default behaviour   Anyway  I tried many of the solutions above and the only one that actually worked for me was   document getElementById  WhateverIdYouWantToScrollTo   scrollIntoView     I put this in a useEffect but you could just as easily put it in componentDidMount or trigger it any other way you wanted to   Not sure why window scrollTo 0  0  wouldn t work for me  and others

User · Answer

Finally   I used   componentDidMount       window scrollTo 0  0      EDIT  React v16 8   useEffect      gt      window scrollTo 0  0

User · Answer

For those using hooks  the following code will work   React useEffect      gt      window scrollTo 0  0             Note  you can also import useEffect directly  import   useEffect   from  react

User · Answer

Something like this worked for me on a component    lt div ref  scroller  style   height  500  overflowX   hidden   overflowY   auto    gt          Content Here  lt  div gt    Then in whatever function is dealing with updates   this refs scroller scrollTop 0

User · Answer

None of the above answers is currently working for me  It turns out that  scrollTo is not as widely compatible as  scrollIntoView   In our App js  in componentWillMount   we added      this props history listen  location  action    gt                setTimeout      gt    document getElementById  root   scrollIntoView   behavior   smooth        777               This is the only solution that is working universally for us  root is the ID of our App  The  smooth  behavior doesn t work on every browser   device  The 777 timeout is a bit conservative  but we load a lot of data on every page  so through testing this was necessary  A shorter 237 might work for most applications

User · Answer

Nothing worked for me but   componentDidMount            document   ready function             window scrollTo 0 0

User · Answer

All the solutions talk about adding the scroll on componentDidMount or componentDidUpdate but with the DOM  I did all of that and didn t worked  So  figured out some other way that works just fine for me   Added componentDidUpdate     window scrollTo 0  0    on the header  that mine is out of the  lt Switch gt  lt  Switch gt  element  Just free in the app  Works   I also found about some ScrollRestoration thing  but I m lazy now  And for now going to keep it the  quot DidUpdate quot  way

User · Answer

This is the only thing that worked for me  with an ES6 class component    componentDidMount       ReactDOM findDOMNode this  scrollIntoView

User · Answer

If I assume you are rendering a chapter of say  a book per page  all you need to do is add this to your code  This worked for me like magic       componentDidUpdate prevProps          if  prevProps currentChapter     this props currentChapter            window scrollTo 0  0                   With this  you have no need creating a ref on the component being rendered

User · Answer

This works for me  import React    useEffect   from  react    useEffect      gt        const body   document querySelector   root         body scrollIntoView           behavior   smooth         500

User · Answer

I added an Event listener on the index html page since it is through which all page loading and reloading is done  Below is the snippet     Event listener addEventListener  quot load quot   function          setTimeout hideURLbar  0      false      function hideURLbar         window scrollTo 0  1

User · Answer

You can do this in the router like that    ReactDOM render    lt Router onUpdate       gt  window scrollTo 0  0   history  browserHistory  gt        lt Route path     component  App  gt           lt IndexRoute component  Home  gt  lt  IndexRoute gt           lt Route path   about  component  About   gt           lt Route path   work  gt               lt IndexRoute component  Work  gt  lt  IndexRoute gt               lt Route path   id  component  ProjectFull  gt  lt  Route gt           lt  Route gt           lt Route path   blog  component  Blog   gt       lt  Route gt    lt  Router gt     document getElementById  root       The onUpdate       gt  window scrollTo 0  0   put the scroll top  For more information check  codepen link

[scroll] Scroll to the top of the page after render in react.js

Examples related to scroll

Examples related to reactjs

Examples related to render