Gatsby: Back button from anchor link does not scroll to previous location

Created on 10 Sep 2018 · 20Comments · Source: gatsbyjs/gatsby

Description

Scrolling to an anchor on the current page works, but clicking the browser's Back button does not scroll back to the previous location.

This is the same as bug #3116, which was closed because of lack of "recent activity", but I can still reproduce it on Firefox and Chromium on Linux and macOS. I have not tried Windows again recently. Opening a new issue as suggested in the last comment.

Steps to reproduce

On https://www.gatsbyjs.org/docs/deploy-gatsby/, scrolled all the way to the top, click on the GitLab Pages link. That scrolls down the page to the right section. Now click the browser's Back button.

Expected result

The browser should scroll back to the top of the page.

Actual result

Instead, the scroll position is not altered.

Demonstration

Environment

This is happening on gatsbyjs.org. I am not using Gatsby myself.

help wanted confirmed

Source

wodin

👍4

Most helpful comment

Hey, I'm waiting for a solution as well on this one, still reproducible on our project :)

Galzk on 9 Jul 2019

👍6

All 20 comments

I just tried this on macOS and could reproduce on Chrome (v 69.0.3497.81).

Fixes welcome if anyone can investigate further!

kakadiadarpan on 10 Sep 2018

Can confirm this issue on the following browsers on Mac OS 10.12.6

Google Chrome Version 69.0.3497.81 (Official Build) (64-bit)
Firefox Quantum 62.0 (64-bit)
Safari Version 11.1.2 (12605.3.8.1)

Steps to reproduce

gatsby new gatsby-v2-issue-8019 https://github.com/gatsbyjs/gatsby-starter-default#v2
Paste following into src/pages/index.js between the Layout tags

    <ul>
      <li>
        <Link to="#bacon">Bacon</Link> 
      </li>
      <li>
        <Link to="#drumstick">Drumstick</Link> 
      </li>
      <li>
        <Link to="#porkchop">Pork Chop</Link> 
      </li>
      <li>
        <Link to="#ribeye">Rib Eye</Link> 
      </li>
      <li>
        <Link to="#sausage">Sausage</Link> 
      </li>
    </ul>
    <div id="bacon">
      <h1>Bacon</h1>
      <p>
        Spicy jalapeno bacon ipsum dolor amet leberkas exercitation tempor shankle cillum strip steak officia ham hock enim drumstick in. Boudin rump tongue, ball tip brisket pig hamburger esse duis lorem commodo laboris pastrami cow. Beef cillum doner do. In cillum turkey, beef duis pork belly turducken. Tail beef flank, aliqua culpa shoulder pastrami.
        Spicy jalapeno bacon ipsum dolor amet leberkas exercitation tempor shankle cillum strip steak officia ham hock enim drumstick in. Boudin rump tongue, ball tip brisket pig hamburger esse duis lorem commodo laboris pastrami cow. Beef cillum doner do. In cillum turkey, beef duis pork belly turducken. Tail beef flank, aliqua culpa shoulder pastrami.
        Spicy jalapeno bacon ipsum dolor amet leberkas exercitation tempor shankle cillum strip steak officia ham hock enim drumstick in. Boudin rump tongue, ball tip brisket pig hamburger esse duis lorem commodo laboris pastrami cow. Beef cillum doner do. In cillum turkey, beef duis pork belly turducken. Tail beef flank, aliqua culpa shoulder pastrami.
      </p>
    </div>  
    <div id="drumstick">
      <h1>Drumstick</h1>
      <p>
        Drumstick doner buffalo id picanha ham. Brisket shoulder dolore, velit sint ex pork chicken fugiat eiusmod. Do capicola swine filet mignon. T-bone ribeye minim, capicola nostrud in laboris sint turkey esse nisi ut officia tempor tail. Swine aliqua elit aliquip consequat ground round culpa ut esse officia doner jowl pork chop cow.
        Drumstick doner buffalo id picanha ham. Brisket shoulder dolore, velit sint ex pork chicken fugiat eiusmod. Do capicola swine filet mignon. T-bone ribeye minim, capicola nostrud in laboris sint turkey esse nisi ut officia tempor tail. Swine aliqua elit aliquip consequat ground round culpa ut esse officia doner jowl pork chop cow.
        Drumstick doner buffalo id picanha ham. Brisket shoulder dolore, velit sint ex pork chicken fugiat eiusmod. Do capicola swine filet mignon. T-bone ribeye minim, capicola nostrud in laboris sint turkey esse nisi ut officia tempor tail. Swine aliqua elit aliquip consequat ground round culpa ut esse officia doner jowl pork chop cow.
      </p>
    </div> 
    <div id="porkchop">
      <h1>Pork Chop</h1>
      <p>
        Pork chop deserunt ham hock, pork occaecat ipsum burgdoggen pastrami picanha bacon minim dolore. Ullamco ribeye ut, burgdoggen ground round jerky veniam corned beef. Pariatur officia pork corned beef jerky. Labore leberkas laboris tempor jerky meatloaf aliqua sint bresaola prosciutto officia shankle. Short ribs culpa shank corned beef.
        Pork chop deserunt ham hock, pork occaecat ipsum burgdoggen pastrami picanha bacon minim dolore. Ullamco ribeye ut, burgdoggen ground round jerky veniam corned beef. Pariatur officia pork corned beef jerky. Labore leberkas laboris tempor jerky meatloaf aliqua sint bresaola prosciutto officia shankle. Short ribs culpa shank corned beef.
        Pork chop deserunt ham hock, pork occaecat ipsum burgdoggen pastrami picanha bacon minim dolore. Ullamco ribeye ut, burgdoggen ground round jerky veniam corned beef. Pariatur officia pork corned beef jerky. Labore leberkas laboris tempor jerky meatloaf aliqua sint bresaola prosciutto officia shankle. Short ribs culpa shank corned beef.
      </p>
    </div> 
    <div id="ribeye">
      <h1>Ribeye</h1>
      <p>
        Lorem ribeye laboris sirloin, pastrami picanha tail shoulder. Eu aute chuck ham hock tri-tip swine, dolor shoulder occaecat sirloin cupim minim drumstick bresaola. Shoulder consectetur sint buffalo. Consequat incididunt ea capicola sausage. Consequat velit tenderloin ground round exercitation jowl. Beef ribs ribeye aliqua laborum consequat t-bone buffalo. Pastrami aliqua pariatur mollit biltong, leberkas in nisi magna officia est t-bone in.
        Lorem ribeye laboris sirloin, pastrami picanha tail shoulder. Eu aute chuck ham hock tri-tip swine, dolor shoulder occaecat sirloin cupim minim drumstick bresaola. Shoulder consectetur sint buffalo. Consequat incididunt ea capicola sausage. Consequat velit tenderloin ground round exercitation jowl. Beef ribs ribeye aliqua laborum consequat t-bone buffalo. Pastrami aliqua pariatur mollit biltong, leberkas in nisi magna officia est t-bone in.
        Lorem ribeye laboris sirloin, pastrami picanha tail shoulder. Eu aute chuck ham hock tri-tip swine, dolor shoulder occaecat sirloin cupim minim drumstick bresaola. Shoulder consectetur sint buffalo. Consequat incididunt ea capicola sausage. Consequat velit tenderloin ground round exercitation jowl. Beef ribs ribeye aliqua laborum consequat t-bone buffalo. Pastrami aliqua pariatur mollit biltong, leberkas in nisi magna officia est t-bone in.
      </p>
    </div> 
    <div id="sausage">
      <h1>Sausage</h1>
      <p>
        Swine sausage prosciutto, occaecat dolore beef incididunt irure leberkas. Ullamco qui burgdoggen labore, culpa porchetta corned beef adipisicing. Biltong anim irure corned beef veniam reprehenderit ribeye doner, dolor ea prosciutto. Qui eiusmod do est non reprehenderit, sunt exercitation salami meatloaf in short loin aliqua pastrami velit. Andouille frankfurter et short loin picanha kielbasa pastrami salami eu pork irure beef qui. Ribeye est rump tongue cillum strip steak pariatur ut qui.
        Swine sausage prosciutto, occaecat dolore beef incididunt irure leberkas. Ullamco qui burgdoggen labore, culpa porchetta corned beef adipisicing. Biltong anim irure corned beef veniam reprehenderit ribeye doner, dolor ea prosciutto. Qui eiusmod do est non reprehenderit, sunt exercitation salami meatloaf in short loin aliqua pastrami velit. Andouille frankfurter et short loin picanha kielbasa pastrami salami eu pork irure beef qui. Ribeye est rump tongue cillum strip steak pariatur ut qui.
        Swine sausage prosciutto, occaecat dolore beef incididunt irure leberkas. Ullamco qui burgdoggen labore, culpa porchetta corned beef adipisicing. Biltong anim irure corned beef veniam reprehenderit ribeye doner, dolor ea prosciutto. Qui eiusmod do est non reprehenderit, sunt exercitation salami meatloaf in short loin aliqua pastrami velit. Andouille frankfurter et short loin picanha kielbasa pastrami salami eu pork irure beef qui. Ribeye est rump tongue cillum strip steak pariatur ut qui.
      </p>
    </div>

(FWIW replacing the Link tag with a standard hyperlink does not fix the issue)

cd gatsby-v2-issue-8019
gatsby develop
Open http://localhost:8000
Click on sausage link
Click on back button

Environment

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
    Shell: 2.6.0 - /usr/local/bin/fish
  Binaries:
    Node: 10.2.1 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.81
    Firefox: 62.0
    Safari: 11.1.2
  npmPackages:
    gatsby: next => 2.0.0-rc.19
    gatsby-plugin-manifest: next => 2.0.2-rc.1
    gatsby-plugin-offline: next => 2.0.0-rc.6
    gatsby-plugin-react-helmet: next => 3.0.0-rc.1
  npmGlobalPackages:
    gatsby-cli: 1.1.58
    gatsby: 1.9.277

Issue title

I'd suggest that Back button from anchor link does not scroll to previous location is a more descriptive issue title.

tjgilpin on 11 Sep 2018

AFAICT this is because hash link scrolling is handled by <Link />, which is not invoked when navigating with browser buttons. Moving this to shouldUpdateScroll does seem to work, and also seems like a better place to do this.

stefanprobst on 11 Sep 2018

Can confirm the issue is still present on v1 documentation
https://v1.gatsbyjs.org/docs/deploy-gatsby/

But appears fixed in current (v2) documentation on all browsers below
https://www.gatsbyjs.org/docs/recipes/

Recreation: Click the anchor links and hit back.

Windows 10 Version 10.0.17134 Build 17134

Firefox Quantum 63.0 (64-bit)
Chrome Version 69.0.3497.100 (Official Build) (64-bit)
Microsoft Edge 42.17134.1.0

hackily on 27 Oct 2018

The original bug is no longer reproducible for me, however there's a new one. The back button still does not scroll to the correct location. It just scrolls to the top of the page.

On https://www.gatsbyjs.org/docs/recipes/ scroll down until the Transforming data link is at the top of the page. Click on the Transforming data link. The browser correctly scrolls to the Transforming data section at the bottom of the page. Now click the back button and instead of scrolling back to the Transforming data link, it scrolls right to the very top of the page.

Reproduced on:
Firefox Quantum 62.0.3 (64-bit) (macOS High Sierra)
Firefox Quantum 63.0 (32-bit) (Windows 10)
Firefox Quantum 63.0 (32-bit) (Ubuntu 18.04)
Google Chrome 69.0.3497.100 (Official Build) (64-bit) (macOS High Sierra)
Chromium 70.0.3538.67 (Official Build) (Ubuntu 18.04)
Microsoft Edge 42.17677.1000.0 (Windows 10)
Safari 11.1 (13605.1.33.1.4) (macOS High Sierra)

As before, the scrolling works correctly in IE11.

wodin on 27 Oct 2018

I believe that behavior is expected with anchor links. There is no logic to save your the previous scroll location, that is just the browser's default behavior.

hackily on 27 Oct 2018

I believe that behavior is expected with anchor links. There is no logic to save your the previous scroll location, that is just the browser's default behavior.

No, that is not true.

Try this:

$ curl -o /tmp/recipes.html https://www.gatsbyjs.org/docs/recipes/
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  148k  100  148k    0     0  42422      0  0:00:03  0:00:03 --:--:-- 42410

Then open file:///tmp/recipes.html and try to reproduce the problem.
This scrolls correctly for me in Firefox, Chrome, Safari, etc. unlike https://www.gatsbyjs.org/docs/recipes/

wodin on 28 Oct 2018

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

gatsbot[bot] on 26 Jan 2019

👎2

What? I was the last person to respond! And the scroll behaviour wrt. anchor links is still broken.

wodin on 26 Jan 2019

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

gatsbot[bot] on 6 Feb 2019

😕2 👎1

If the bot is going to close issues regardless of replies, perhaps it should not suggest that one "reply here ... to keep this issue open" 😥

wodin on 6 Feb 2019

:( sorry about that. There were some earlier issues with gatsbot being overenthusiastic which _should_ be fixed now.

m-allanson on 7 Feb 2019

👍1

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

gatsbot[bot] on 28 Feb 2019

This is still a problem. It can be reproduced on https://www.gatsbyjs.org/docs/recipes

wodin on 5 Mar 2019

Hey, I'm waiting for a solution as well on this one, still reproducible on our project :)

Galzk on 9 Jul 2019

👍6

Just did the procedure @wodin to reproduce the issue, but I'm unable to reproduce it.

OS: Ubuntu 19.10
Browsers:

Brave - Version 1.5.123 Chromium: 80.0.3987.163 (Official Build) (64-bit)
Firefox 75.0 (64bit)

vulcanr on 14 Apr 2020

Ah! It's not perfect, but it's vastly improved.

Since the /docs/deploy-gatsby/ link no longer exists, you can test here:
https://www.gatsbyjs.org/docs/gatsby-config/

To see how it's supposed to work, open the following HTML file in a browser:
scroll-test.html.zip
(I had to zip it to appease GitHub)

On the gatsby-config page, click on one of the siteMetadata links. Then scroll part of the way towards the Plugins section. Then click on the Polyfill link and again scroll down a little.
If you click the Back button now it should go back to where you were when you clicked on the Polyfill link. i.e. somewhere in the siteMetadata section. Instead it scrolls to the top of the siteMetadata section.
If you click the Forward button now it should go back to where you were just before clicking on the Back button, i.e. somewhere within the Polyfill section. Instead it scrolls to the top of the Polyfill section.

If you follow a similar procedure in the scroll-test.html file you'll see that the browser correctly takes you to where you were when clicking back/forward.

wodin on 16 Apr 2020

Here still happens after updating all plugins.