How to fix Gatsby JS Link component retaining scroll position and not resetting to topreactjs return to same segment of pageDoes React have keep-alive like Vue js?React: How to preserve scroll position when coming back from external sitesHow to keep scroll position using flatlist when navigating back in react native ?React Router: How to link back to scroll position of previous pageHow to send Gatsby-Image to component as propertyAdding an id to React/Gatsby component for hash linkHow to add js to React components in Gatsby?Retain scroll position using <Link>MUI Waterfall toolbar implementation
Can a US president have someone sent to prison?
SPI Waveform on Raspberry Pi Not clean and I'm wondering why
“Faire” being used to mean “avoir l’air”?
Generate and graph the Recamán Sequence
If my Scout rogue has used his full movement on his turn, can he later use the reaction from the Skirmisher feature to move again?
One folder two different locations on ubuntu 18.04
Alphabet completion rate
Do I have to roll to maintain concentration if a target other than me who is affected by my concentration spell takes damage?
MH370 blackbox - is it still possible to retrieve data from it?
Should I hide continue button until tasks are completed?
Cross over of arrows in a complex diagram
Analog is Obtuse!
What does 2>&1 | tee mean?
Procedurally generate regions on island
Zombie Diet, why humans
Is there a short way to check uniqueness of values without using 'if' and multiple 'and's?
Did Chinese school textbook maps (c. 1951) "depict China as stretching even into the central Asian republics"?
Intuitively, why does putting capacitors in series decrease the equivalent capacitance?
Are there any vegetarian astronauts?
Why is a blank required between "[[" and "-e xxx" in ksh?
“Transitive verb” + interrupter+ “object”?
How well known and how commonly used was Huffman coding in 1979?
Are there semi plausible scenarios where Nuclear Winter could last a thousand years or trigger an ice age?
How exactly is a normal force exerted, at the molecular level?
How to fix Gatsby JS Link component retaining scroll position and not resetting to top
reactjs return to same segment of pageDoes React have keep-alive like Vue js?React: How to preserve scroll position when coming back from external sitesHow to keep scroll position using flatlist when navigating back in react native ?React Router: How to link back to scroll position of previous pageHow to send Gatsby-Image to component as propertyAdding an id to React/Gatsby component for hash linkHow to add js to React components in Gatsby?Retain scroll position using <Link>MUI Waterfall toolbar implementation
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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() Fiftyone3</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
Viewable here: https://fiftyone3-beta.netlify.com/
Code for replicated error here: https://github.com/eagleeyejack/gatsby-scroll-bug
reactjs gatsby
asked Mar 25 at 11:30
Jack David EvansJack David Evans
13 bronze badges
add a comment |
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() Fiftyone3</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
Viewable here: https://fiftyone3-beta.netlify.com/
Code for replicated error here: https://github.com/eagleeyejack/gatsby-scroll-bug
reactjs gatsby
asked Mar 25 at 11:30
Jack David EvansJack David Evans
13 bronze badges
add a comment |
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() Fiftyone3</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
Viewable here: https://fiftyone3-beta.netlify.com/
Code for replicated error here: https://github.com/eagleeyejack/gatsby-scroll-bug
reactjs gatsby
asked Mar 25 at 11:30
Jack David EvansJack David Evans
13 bronze badges
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() Fiftyone3</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
Viewable here: https://fiftyone3-beta.netlify.com/
Code for replicated error here: https://github.com/eagleeyejack/gatsby-scroll-bug
reactjs gatsby
reactjs gatsby
asked Mar 25 at 11:30
Jack David EvansJack David Evans
13 bronze badges
asked Mar 25 at 11:30
Jack David EvansJack David Evans
13 bronze badges
edited Mar 25 at 12:15
Jack David Evans
asked Mar 25 at 11:30
Jack David EvansJack David Evans
13 bronze badges
asked Mar 25 at 11:30
Jack David EvansJack David Evans
13 bronze badges
asked Mar 25 at 11:30
Jack David EvansJack David Evans
13 bronze badges
13 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Mar 25 at 18:08
Jack David EvansJack David Evans
13 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55336831%2fhow-to-fix-gatsby-js-link-component-retaining-scroll-position-and-not-resetting%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Mar 25 at 18:08
Jack David EvansJack David Evans
13 bronze badges
add a comment |
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.
answered Mar 25 at 18:08
Jack David EvansJack David Evans
13 bronze badges
add a comment |
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.
answered Mar 25 at 18:08
Jack David EvansJack David Evans
13 bronze badges
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.
answered Mar 25 at 18:08
Jack David EvansJack David Evans
13 bronze badges
answered Mar 25 at 18:08
Jack David EvansJack David Evans
13 bronze badges
answered Mar 25 at 18:08
Jack David EvansJack David Evans
13 bronze badges
answered Mar 25 at 18:08
Jack David EvansJack David Evans
13 bronze badges
13 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55336831%2fhow-to-fix-gatsby-js-link-component-retaining-scroll-position-and-not-resetting%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
