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(
      <section className='checklist-section'>
        <header className='section-header'>{ this.state.section.name }   </header>
        <Steps steps={ this.state.section.steps }/>
        <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
          Next Section
        </a>
      </section>
    );
    } else {...}
  }
});

module.exports = Checklist;

Helped me the most - stackoverflow.com/a/38229616/104380

vsync
– vsync

2021-02-04 16:53:38 +00:00
Commented Feb 4, 2021 at 16:53 — vsync
– vsync, Commented Feb 4, 2021 at 16:53

amoreton · Accepted Answer · 2020-02-04 22:45:07Z

642

Finally.. I used:

componentDidMount() {
  window.scrollTo(0, 0)
}

EDIT: React v16.8+

useEffect(() => {
  window.scrollTo(0, 0)
}, [])

edited Feb 4, 2020 at 22:45

answered Sep 6, 2016 at 9:16

amoreton

8,1556 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Michael Bushe Over a year ago

This is only solution that worked for me. Also tried: ReactDOM.findDOMNode(this).scrollTop = 0 and componentDidMount() { this._div.scrollTop = 0 } render() { return <div ref={(ref) => this._div = ref} /> }

BishopZ Over a year ago

According to W3Schools, this solution is currently supported by all browsers. Also the ReactDOM library is being deprecated in future versions of React.

amoreton Over a year ago

@Tomasz - I found i still had this issues sometimes when I had certain divs set to height or min-height: 100%. I had to remove and either wrap it in a parent or move further into the tree where it could still scroll

Puneet Lamba Over a year ago

This worked for me but not under componentDidMount, since CDM may not be fired when the state change results in a re-rendering of the page. So put this call -- window.scrollTo(0, 0); -- wherever it is you change the state.

Powderham Over a year ago

For those using hooks, the following code will work. React.useEffect(() => { window.scrollTo(0, 0); }, []); Note, you can also import useEffect directly: import { useEffect } from 'react'

|

Andrew Kovalenko · Accepted Answer · 2019-02-06 18:46:43Z

101

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 <div ref={this.myRef}></div> 
}   // attach the ref property to a dom element

edited Feb 6, 2019 at 18:46

answered Oct 19, 2015 at 0:19

Andrew Kovalenko

6,8104 gold badges31 silver badges45 bronze badges

7 Comments

Dave Lunny Over a year ago

this.getDOMNode === undefined

Marcus Ericsson Over a year ago

@DaveLunny you may be on react15? try importing ReactDOM and doing ReactDOM.findDOMNode(this).scrollTop = 0

Joe Delgado Over a year ago

this is undefined in arrow functions is incorrect. The this keyword is bound to the same context as the enclosing function developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

bbrinx Over a year ago

If possible you should avoid ReactDom.findDOMNode(). Use a ref instead. I posted a solution using smooth scroll here

Anupam Maurya Over a year ago

default.a.createRef is not a function

|

mauris · Accepted Answer · 2019-06-09 12:25:10Z

62

You could use something like this. ReactDom is for react.14. Just React otherwise.

    componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

Update 5/11/2019 for React 16+

  constructor(props) {
    super(props)
    this.childDiv = React.createRef()
  }

  componentDidMount = () => this.handleScroll()

  componentDidUpdate = () => this.handleScroll()

  handleScroll = () => {
    const { index, selected } = this.props
    if (index === selected) {
      setTimeout(() => {
        this.childDiv.current.scrollIntoView({ behavior: 'smooth' })
      }, 500)
    }
  }

edited Jun 9, 2019 at 12:25

mauris

43.6k16 gold badges102 silver badges132 bronze badges

answered Oct 17, 2015 at 17:01

J. Mark Stevens

4,9452 gold badges15 silver badges18 bronze badges

3 Comments

Josh F Over a year ago

Of all the suggestions on this page, this is the only one that works for me.

Alex Fallenstedt Over a year ago

Note: if componentDidUpdate does not work for you, componentDidMount is another alternative.

Vivek Kumar Over a year ago

findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode. reactjs.org/docs/react-dom.html

Quentin C · Accepted Answer · 2019-10-02 13:04:28Z

32

Hook solution:

Create a ScrollToTop hook


    import { useEffect } from "react";
    import { withRouter } from "react-router-dom";

    const ScrollToTop = ({ children, location: { pathname } }) => {
      useEffect(() => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      }, [pathname]);

      return children || null;
    };

    export default withRouter(ScrollToTop);

Wrap your App with it


    <Router>
        <ScrollToTop>
           <App />
        </ScrollToTop>
    </Router>

Documentation : https://reacttraining.com/react-router/web/guides/scroll-restoration

answered Oct 2, 2019 at 13:04

Quentin C

1,89317 silver badges29 bronze badges

1 Comment

Hassan Khan Over a year ago

Amazing this works for me flawless. Thanks for the help! ❤

Afaq Ahmed Khan · Accepted Answer · 2019-01-10 10:16:17Z

28

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

edited Jan 10, 2019 at 10:16

Afaq Ahmed Khan

2,3222 gold badges31 silver badges41 bronze badges

answered Jun 13, 2018 at 1:47

vishalshettydev

1,6982 gold badges27 silver badges43 bronze badges

3 Comments

Toxnyc Over a year ago

is this the recommended way if I use this for my 'jump to top' button? or if there's a 'react' way where we don't use the window object?

vishalshettydev Over a year ago

Thanks for bringing into the notice, the solution I have given is applicable for a react-router dom version less than v5, I was using v4.2.2 and there when you navigate to another page you weren't taken by default to the top of the page, so we have to manually take the user to the top of the page after navigation, but with v5.0.1 react-router dom stopped shipping the scroll restoration out of the box, because as per their document they say that browsers started supporting this feature by default and with latest version of react-router-dom you will taken to the top of the page after navigation.

vishalshettydev Over a year ago

@Toxnyc so using window object is what Javascript is, If react is on top of Javascript then even if you use any of the React Plugin behind the scenes it will be using Javascript and window object only, as per my knowledge react document is not having anything by which we can get the details of window screen. we have to go with Javascript for making it work.

Powderham · Accepted Answer · 2019-07-19 10:53:50Z

23

For those using hooks, the following code will work.

React.useEffect(() => {
  window.scrollTo(0, 0);
}, []);

Note, you can also import useEffect directly: import { useEffect } from 'react'

answered Jul 19, 2019 at 10:53

Powderham

1,66015 silver badges14 bronze badges

1 Comment

Powderham Over a year ago

The [] as the second parameter means it will only happen on the first render, have you tried without?

GGAlanSmithee · Accepted Answer · 2016-05-18 11:20:58Z

14

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 <div ref={(ref) => this._div = ref} />
    }
}

answered May 18, 2016 at 11:20

GGAlanSmithee

3551 gold badge5 silver badges11 bronze badges

4 Comments

Josh F Over a year ago

This works great. Thanks. To be clear, I put the <div ref={(ref) => this._div = ref} /> in the very first <div> of my render statement. The rest of my render stays exactly the same.

furcicm Over a year ago

In case you are using Styled components you will need to use "innerRef" instead of "ref". Great solution

chuckfactory Over a year ago

Totally works. For what I was working on, I could be even simpler with <div ref="main"> and then this.refs.main.scrollTop=0

NJensen Over a year ago

@chuckfactory setting refs using strings is probably going to be removed at some point, and actually has some interesting drawbacks you might want to learn about. news.ycombinator.com/edit?id=12093234

Afaq Ahmed Khan · Accepted Answer · 2019-01-10 10:15:04Z

14

You can do this in the router like that:

ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
     <Route path='/' component={App}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="/about" component={About}/>
        <Route path="/work">
            <IndexRoute component={Work}></IndexRoute>
            <Route path=":id" component={ProjectFull}></Route>
        </Route>
        <Route path="/blog" component={Blog}/>
    </Route>
 </Router>
), document.getElementById('root'));

The onUpdate={() => window.scrollTo(0, 0)} put the scroll top. For more information check: codepen link

edited Jan 10, 2019 at 10:15

Afaq Ahmed Khan

2,3222 gold badges31 silver badges41 bronze badges

answered May 24, 2017 at 16:27

Ana Maria Cabrera

1411 silver badge4 bronze badges

3 Comments

alengel Over a year ago

elegant solution that only requires a tiny code change in the router rather than having each component handle it itself. <3

connected_user Over a year ago

Unfortunately onUpdate fires with every new routeParam routed in a given route. So if you for instance have a page with a bunch of images, and if you could expand the image in a modal when clicked changing the the route to /somePage/:imgId, it will scroll up :(. Any way to "control" whether or not to fire the onUpdate event on specific routes/params?

Nicole Over a year ago

When I tried this, TypeScript complained that onUpdate does not exist in HashRouter's props... If anybody encounters the same issue: I ended up using the ScrollToTop solution described further down (and in the react-router docs) which worked perfectly for me.

bellabelle · Accepted Answer · 2021-01-21 06:58:22Z

14

This works for me.

import React, { useEffect } from 'react';

useEffect(() => {
    const body = document.querySelector('#root');

    body.scrollIntoView({
        behavior: 'smooth'
    }, 500)

}, []);

edited Jan 21, 2021 at 6:58

answered Jul 5, 2020 at 14:37

bellabelle

9267 silver badges13 bronze badges

1 Comment

EduardoUstarez Over a year ago

It works to me, because I have the click component inside the parent component, I could not use "useRef"

Akash Kumar Seth · Accepted Answer · 2021-09-19 11:03:01Z

12

I have tried @sledgeweight solution but it does not work well for some of the views. But adding a setTimeout seems to work perfectly. In case someone facing the same issue as me. Below is my code.

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const ScrollToTop = () => {
    const { pathname } = useLocation()
    useEffect(() => {
        console.log(pathname)
        /* settimeout make sure this run after components have rendered. This will help fixing bug for some views where scroll to top not working perfectly */
        setTimeout(() => {
            window.scrollTo({ top: 0, behavior: 'smooth' })
        }, 0)
    }, [pathname])
    return null
}

export default ScrollToTop

Use it in AppRouter.js as

<Router>
    <ScrollToTop/>
    <App>
</Router>

answered Sep 19, 2021 at 11:03

Akash Kumar Seth

1,7011 gold badge19 silver badges22 bronze badges

2 Comments

Gel Over a year ago

Good idea to add smooth behavior.

Akash Kumar Seth Over a year ago

Update - Right now I am using react-router v6.4 and their ScrollRestoration components seem a good solution for such a case.

Matt Carlotta · Accepted Answer · 2019-03-12 00:19:46Z

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 => {
  class ResetWindowScroll extends Component {
    componentDidUpdate = (prevProps) => {
      if(this.props.location !== prevProps.location) window.scrollTo(0,0);
    }

    render = () => <WrappedComponent {...this.props} />
  }
  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 (
    <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={ScrollIntoView(Blog)} />
        <Route path="*" component={NotFound} />
    </Route>
);

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 = () => window.scrollTo(0, 0);

  render = () => this.props.children
}

export default ScrollIntoView;

components/Home.js

import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";

export default () => (
  <ScrollIntoView>
    <div className="container">
      <p>
        Sample Text
      </p>
    </div>
  </ScrollIntoView>
);

ScrollIntoView.js is giving me the following error "unused expression, expected an assignment or function call"

Rohit Nishad · Accepted Answer · 2021-08-09 09:50:27Z

10

This solution is working for the Functional component as well as the Class Base.

First of all, I do not like the idea of Scroll to top on every re-render, instead, I like of attache function to the particular event.

Step #1: Create a function to ScrollToTop

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

Step #2: Call this function on an `event` e.g `onClick`

onRowClick={scrollToTop()}
// onClick={scrollToTop()}
// etc...

answered Aug 9, 2021 at 9:50

Rohit Nishad

2,7872 gold badges25 silver badges34 bronze badges

Comments

Arpit · Accepted Answer · 2018-02-09 11:44:26Z

9

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 <Router

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

answered Feb 9, 2018 at 11:44

Arpit

1,4951 gold badge17 silver badges22 bronze badges

1 Comment

rash Over a year ago

really good solution!if you have routes just render it at the top of your routes, but below Router.I didnt have to change every single component.

James Shiztar · Accepted Answer · 2018-05-02 11:20:57Z

9

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

answered May 2, 2018 at 11:20

James Shiztar

5085 silver badges11 bronze badges

1 Comment

jj0b Over a year ago

I used a useEffect hook but this worked great for me on a Gatsby project. Thanks!

jerryurenaa · Accepted Answer · 2020-03-20 21:53:35Z

9

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

<a className="scroll-to-top rounded" style={{display: "inline"}} onClick={this.scrollTop}>TOP</a>

if you want to add nice styles here is the css

.scroll-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

answered Mar 20, 2020 at 21:53

jerryurenaa

4,7701 gold badge33 silver badges21 bronze badges

2 Comments

sudonitin Over a year ago

the code snippet doesn't seem to work. But the solution worked for me. Thanks and cheers!

jerryurenaa Over a year ago

@JohnVandivier maybe you are doing something wrong because we have tested this in almost all of the webs developed by our company. Please read and double-check again.

sahil singh · Accepted Answer · 2022-07-02 11:07:18Z

9

Smooth scroll to top . In hooks you can use this method inside lifecycle mounting state for once render

useEffect(() => {
  window.scrollTo({top: 0, left: 0, behavior: 'smooth' });
}, [])

answered Jul 2, 2022 at 11:07

sahil singh

1161 silver badge2 bronze badges

Comments

danharsanyi · Accepted Answer · 2017-06-30 00:54:06Z

8

This is the only thing that worked for me (with an ES6 class component):

componentDidMount() {
  ReactDOM.findDOMNode(this).scrollIntoView();
}

answered Jun 30, 2017 at 0:54

danharsanyi

4365 silver badges5 bronze badges

1 Comment

Erik James Robles Over a year ago

Likewise. I tried all of the other solutions and this is the only one that worked for me.

Muhammad Awais · Accepted Answer · 2020-10-02 12:31:16Z

8

The page that appears after clicking, just write into it.

  componentDidMount() {
    window.scrollTo(0, 0);
  }

answered Oct 2, 2020 at 12:31

Muhammad Awais

3053 silver badges3 bronze badges

Comments

VrisToK · Accepted Answer · 2021-05-19 22:24:16Z

8

I was doing a SPA in React 17.0 using functional components and window.scroll, window.scrollTo and all of this variants doesn't work for me. So I made a solution using useRef hook. I created a span tag in the top of the component with Ref and then I used and effect with ref.current.scrollIntoView()

There is a short example:

import React, { useEffect,useRef} from 'react';

export const ExampleComponent = () => {

  const ref = useRef();

  useEffect(() => {
      ref.current.scrollIntoView()
  }, []);

return(

 <>
   <span ref={ref}></span>
   <YourCodeHere />
   <MoreCode />
</>

) }

answered May 19, 2021 at 22:24

VrisToK

691 silver badge2 bronze badges

Comments

Gabriel Ezenwankwo · Accepted Answer · 2019-10-29 11:17:08Z

7

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}) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [result])
}

answered Oct 29, 2019 at 11:17

Gabriel Ezenwankwo

4324 silver badges5 bronze badges

1 Comment

CrsCaballero Over a year ago

en.reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook Don't forget, a hook name should start with the word use

Shubham Sarda · Accepted Answer · 2022-08-09 10:39:30Z

6

For React v18+ my recommendation will be to use wrapper component, will be the easiest way to execute.

Step 1: Create a ScrollToTop component (component/ScrollToTop.js)

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Step 2: Wrap your App with it (index.js)

<React.StrictMode>
  <BrowserRouter>
    <ScrollToTop />
    <App />
  </BrowserRouter>
</React.StrictMode>

Explanation: Every time pathname changes useEffect will be called to scroll the page to the top.

edited Aug 9, 2022 at 10:39

answered Aug 9, 2022 at 9:57

Shubham Sarda

6458 silver badges13 bronze badges

Comments

Alexandru Lupu · Accepted Answer · 2020-09-16 13:10:31Z

5

I tried everything, but this is the only thing that worked.

 useLayoutEffect(() => {
  document.getElementById("someID").scrollTo(0, 0);
 });

answered Sep 16, 2020 at 13:10

Alexandru Lupu

3212 silver badges11 bronze badges

Comments

Andy · Accepted Answer · 2021-01-21 17:05:14Z

5

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 = () => {
   setAStateVariable(true);
}

useEffect(() => {
  if(aStateVariable === true) {
    window.scrollTo(0, 0)
  }
}, [aStateVariable])

answered Jan 21, 2021 at 17:05

Andy

7352 gold badges12 silver badges28 bronze badges

Comments

Dharman · Accepted Answer · 2020-09-26 13:16:39Z

4

This is what I did:

useEffect(() => ref.current.scrollTo(0, 0));
const ref = useRef()

       return(
         <div ref={ref}>
           ...
         </div>
        )

edited Sep 26, 2020 at 13:16

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered May 12, 2020 at 17:26

react developer

794 bronze badges

Comments

Apurv · Accepted Answer · 2023-12-16 10:10:49Z

4

useEffect(() => {
    const body = document.querySelector('#root');

    body.scrollIntoView({
        behavior: 'smooth'
    }, 500)

}, []);

This best solution for view top scrolling page

or use ref to jump page

    // a link jump to page react
const ref = useRef(null);

  const handleClick = () => {
    ref.current?.scrollIntoView({behavior: 'smooth'});
  };

 <button onClick={handleClick}>Scroll to element</button>
 <div ref={ref}>Some content here</div>

In javascript, we can use window.scrollTo() function

 window.scrollTo({ top: 0, behavior: 'smooth' });

edited Dec 16, 2023 at 10:10

answered Sep 13, 2022 at 5:53

Apurv

1579 bronze badges

Comments

GavKilbride · Accepted Answer · 2019-09-06 04:06:49Z

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) => {
  const [scrollToTop, setScrollToTop] = useState(initialScrollState);

  useEffect(() => {
    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) => {
  // initialise useScrollToTop with true in order to scroll on page load 
  const setScrollToTop = useScrollToTop(true);

  ...

  return <div onClick={() => setScrollToTop(true)}>click me to scroll to top</div>
}

jj0b · Accepted Answer · 2019-11-27 23:25:19Z

3

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).

answered Nov 27, 2019 at 23:25

jj0b

1,1261 gold badge12 silver badges19 bronze badges

Comments

Astrit Spanca · Accepted Answer · 2020-12-21 13:17:03Z

3

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:

 <ScrollTop>
    <Routes />
  </ScrollTop>

Inside ScrollTopComponent we have the following:

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

const ScrollTop = (props) => {
  const { children } = props;

  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location]);

  return <main>{children}</main>;
};

export default ScrollTop;

edited Dec 21, 2020 at 13:17

answered Dec 21, 2020 at 12:56

Astrit Spanca

7246 silver badges15 bronze badges

Comments

Khushi Shivde · Accepted Answer · 2021-07-30 10:39:35Z

3

Solution for functional component - Using useEffect() hook

 useEffect(() => {
window.history.scrollRestoration = 'manual';}, []);

answered Jul 30, 2021 at 10:39

Khushi Shivde

312 bronze badges

Comments

Afaq Ahmed Khan · Accepted Answer · 2019-01-10 13:52:02Z

2

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

edited Jan 10, 2019 at 13:52

Afaq Ahmed Khan

2,3222 gold badges31 silver badges41 bronze badges

answered Aug 13, 2018 at 8:18

Artur Carvalho

7,20711 gold badges80 silver badges116 bronze badges

Collectives™ on Stack Overflow

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

40 Answers 40

15 Comments

7 Comments

3 Comments

1 Comment

3 Comments

1 Comment

4 Comments

3 Comments

1 Comment

2 Comments

2 Comments

This solution is working for the Functional component as well as the Class Base.

Step #1: Create a function to ScrollToTop

Step #2: Call this function on an `event` e.g `onClick`

Comments

1 Comment

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

40 Answers 40

15 Comments

7 Comments

3 Comments

1 Comment

3 Comments

1 Comment

4 Comments

3 Comments

1 Comment

2 Comments

2 Comments

This solution is working for the Functional component as well as the Class Base.

Step #1: Create a function to ScrollToTop

Step #2: Call this function on an event e.g onClick

Comments

1 Comment

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related

Step #2: Call this function on an `event` e.g `onClick`