How to fix Gatsby JS Link component retaining scroll position and not resetting to top

react maintain scroll position on re-render
react hooks scroll to element
can t resolve gatsby-react-router-scroll
react add scroll event listener
onscroll react
react-scroll position
react-scroll to top
react scroll hook

I'm setting up a website using Gatsby 2.2.10 and the Link components are retaining the scroll positions of the previous page and not scrolling back to the top when they're clicked.

<div className="Footer__legal body">
 <p>© {new Date().getFullYear()} My Nice Company</p>
 <Link to="/privacy-policy">Privacy Policy</Link>
 <Link to="/page-2">Page 2 Link component</Link>
</div>

Expected behaviour:

When you click 'Privacy Policy', 'Page 2' or any page at the bottom of the website, I expect the page to load with user being back at the top.

Actual Behaviour:

User stays at scroll position of the current page

You can also modify gatsby-browser.js and implement a hook for each scroll update:

// in gastby-browser.js
exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  const { pathname } = location
  // list of routes for the scroll-to-top-hook
  const scrollToTopRoutes = [`/privacy-policy`, `/page-2`]
  // if the new route is part of the list above, scroll to top (0, 0)
  if (scrollToTopRoutes.indexOf(pathname) !== -1) {
    window.scrollTo(0, 0)
  }

  return false
}

You will find the code for shouldUpdateScroll on GitHub or in the documentation for shouldUpdateScroll on the GatsbyJS website.

[v2] Navigating to previously visited pages with <Link> retains scroll , Could the <Link> component default to not scrolling to the previous scroll position scroll position isn't reset TylerBarnes/gatsby-plugin-transition-link#21 I have added a Link.js under components, which I import to pages linking to other pages​. Fixed Scroll to top issue, check stackoverflow for resolution Load the home page in browser, resize it, scroll, refresh once and see that it's not retaining the scroll position. I did some quick console debugging and i'm not so sure it's with the scroll-behaviour component. I only found the plugin being referenced in the gatsby-react-router-scroll piece.

Figured out a workaround by converting index.js page into a class-based component and then added

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

Not the cleanest fix nor do I know why it wasn't scrolling automatically, going to a JS meet up next week so will ask the question then and post a follow up if I get an answer.

I have a feeling it's something to do with my styles, as I started a new project and the Gatsby-cli had no issues. Will be refactoring styles to see if this fixes the issue.

Note: Returning to this following Michael's answer, it also related to an overflow: hidden; style I had on the body, removing this also fixed my issue.

How to Smooth Scroll Links in Gatsby - Christopher Fitkin, How to fix Gatsby JS Link component retaining scroll position and not resetting to top - reactjs. Description Each time i load new page, the scroll position stays same as it was on the previous page. I want to reset the scroll position each time page is reloaded. Environment Gatsby version: 1.9.130 Node.js version: 6.10.2 Operating S

If you have overflow: hidden or overflow: auto set on body, you'll have this issue!

Tracking Scroll Position With React Hooks - DEV, links in GatsbyJS that work with the Gatsby element and retain browser history compatibility. If you don't, you can create a starter site using the Gatsby CLI tool​: on your Gatsby <Link> component that matches the id on your target Step 5: Enjoy smooth scrolling links in your Gatsby site  The main purpose for me documenting this is to demonstrate implementing a table of contents with smooth scroll to the anchors in a Gatsby project using MDX. In the process I’m also setting up the Gatsby starter with MDX. TL;DR, go here: Make a TOC component

Hide your header on scroll, Tracking viewport/element scroll position could be vastly useful and for the most In this article, I'll try to solve the aforementioned issues by scrollY } : { x: position.left, y: position.top } } export function useScrollPosition(effect, deps Note, though, that Window.scroll[X|Y] is not supported in IE(11 or below). 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

Vue js load more on scroll, The header on this site is a living example, it slides out of view when scrolling Fixed headers are a popular approach for keeping the primary navigation in offset top : "headroom--top", // when below offset notTop : "headroom--not-top", Clicking on anchor links (links within the same page) causes scrolling of the page​. Method 1: Overriding the window.onscroll function. The window.onscroll event fires when the window has been scrolled. Overriding this function and setting it to a fixed position every time the scroll happens will effectively disable the scroll effect.

Page keeps scrolling to top, Checks scroll position upon call and if trigger is hit, it loads more content. com by scrolling. js team and the author of the best-selling book, The Majesty of Vue. pages Show Loading Button Possibility to give/ share links to certain position For example, if you want to use single-file components in Webpack, we don't  Customizing html.js is a workaround solution for when the use of the appropriate APIs is not available in gatsby-ssr.js. Consider using onRenderBody or onPreRenderHTML instead of the method above. As a further consideration, customizing html.js is not supported within a Gatsby Theme. Use the API methods mentioned instead.

Comments
  • Repo and netlify links are not available.
  • Did this work for you? I'm not having any luck. Any Link I open takes me to the new route scrolled down the same as I was on the previous page.
  • @jj0b Did you restart your gatsby command? Changes in gatsby-config.js and gatsby-browser.js etc. are effective after restarting your develope/serve/build process.
  • I did. The thing that finally worked for me was using document.getElementById("WhateverIdYouWantToScrollTo").scrollIntoView() instead of window.scrollTo(0,0). I happened to use it in a useEffect hook but I'm sure any of the other ways of triggering that line a the right time would likely have worked for me. More details here: stackoverflow.com/questions/33188994/…
  • Returning to this following Michael's answer above, it also related to an overflow: hidden; style I had on the body, removing this also fixed my issue.
  • I am glad, that I could have helped. I'd like to mention one little thing: Instead of adding a comment, think about editing your answer and adding something like "Note: ..."
  • @JackDavidEvans - I was having this problem and I did have a overflow: hidden on my body! removing that solved this for me! Thank you so much!
  • Welcome, and Thanks for your contribution. Please consider updating your post with an ` edit` to explain why this happens, or a link to documentation indicating that this is the defined/expected behavior.
  • This actually was the fix for me–I had overflow: auto on my body. I'm not sure why this is the case, but hopefully someone can help explain why.