search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.17k stars 10.33k forks source link

Back button from anchor link does not scroll to previous location #8019

Closed wodin closed 4 years ago

wodin commented 5 years ago

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.

kakadiadarpan commented 5 years ago

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

Fixes welcome if anyone can investigate further!

tjgilpin commented 5 years ago

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

Steps to reproduce

  1. gatsby new gatsby-v2-issue-8019 https://github.com/gatsbyjs/gatsby-starter-default#v2

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

  3. cd gatsby-v2-issue-8019

  4. gatsby develop

  5. Open http://localhost:8000

  6. Click on sausage link

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

stefanprobst commented 5 years ago

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.

hackily commented 5 years ago

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

wodin commented 5 years ago

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.

hackily commented 5 years ago

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.

wodin commented 5 years ago

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/

gatsbot[bot] commented 5 years ago

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!

wodin commented 5 years ago
image

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

gatsbot[bot] commented 5 years ago

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!

wodin commented 5 years ago

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" 😥

m-allanson commented 5 years ago

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

gatsbot[bot] commented 5 years ago

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! 💪💜

wodin commented 5 years ago

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

Galzk commented 5 years ago

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

vulcanr commented 4 years ago

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

OS: Ubuntu 19.10 Browsers:

wodin commented 4 years ago

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.

stevemarksd commented 4 years ago

Here still happens after updating all plugins.

blainekasten commented 4 years ago

Fixed in latest!

don-esteban commented 3 years ago

Hi @blainekasten

the issue still persists. Tested with Firefox 80.0, Chrome 85.0.4183.83 and Safari 13.1.2 on macOS 10.15.6.

Reproduction steps (Firefox only):

gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog npm update

Insert this two lines somewhere in content/blog/new-beginnings/index.md

[Go to (markdown link)](#gohere) <a href="#gohere">Go to (a href link)</a>

Insert the anchor somewhere below

<h3 id="gohere">Here You are. Now press the backbutton.</h3>

Back Button will not work:

  1. Visit start page http://localhost:8000/
  2. Click "New Beginnings"
  3. Click one of the anchor links
  4. Click back button

Won't return to top of page or previous position.

Back Button still won't work:

  1. Click browser refresh button
  2. Same as above

Back Button will work:

  1. Click in URL address input and hit enter key or visit http://localhost:8000/new-beginnings/ directly
  2. Now back button works as expected
christina-grannas commented 2 years ago

I have this problem in a project as well

don-esteban commented 2 years ago

I have this problem in a project as well

I don't remember all details. Our site (soon productive) works fine. Rules we use for <a> and <Link> are:

  1. Use <Link> for internal links
  2. Use<Link> for internal fragment links
  3. Use <a> for all external links
  4. Use <a> for all internal download links (PDF e.g)

Here you can load some manufacturer pages and test fragment links at the sidebars table of content section.

https://sx.surface-world.de/hersteller/

Hope this helps.

christina-grannas commented 2 years ago

I have this problem in a project as well

I don't remember all details. Our site (soon productive) works fine. Rules we use for <a> and <Link> are:

1. Use `<Link>` for internal links

2. Use`<Link>` for internal fragment links

3. Use `<a>` for all external links

4. Use `<a>` for all internal download links (PDF e.g)

Here you can load some manufacturer pages and test fragment links at the sidebars table of content section.

https://sx.surface-world.de/hersteller/

Hope this helps.

I tested your site as well and it is not working as I would expect as a user. Try this:

  1. Go to https://sx.surface-world.de/hersteller/
  2. Click "Adobe"
  3. Click "Adobe Acrobat 2020" in the right menu
  4. Scroll down a bit
  5. Click a link to some other page
  6. Click back button in browser

Behavior: I end up at "Adobe Acrobat 2020"

Expected behavior: I would expect to end up at the scroll position I was after scrolling in step 4. I believe this is the default behavior of the browser. You can compare with this page for example: https://www.w3.org/Graphics/Color/Workshop/talks.html

don-esteban commented 2 years ago

Yes, that's right and probably not the expected behavior. I'm very busy with the launch of the site and do not have time to address this issue at the moment. I put it at my "post release to do list". If you have time, I would recommend the following steps:

  1. Make a public GitHub minimal reproduction site (cloning a starter)
  2. Open an issue

Thanks for indicating this issue.

PS: Our site is a Gatsby 2.x site. Could one confirm this issue at Gatsby 3.x?

christina-grannas commented 2 years ago

Turns out that its a bug in reach/router, there is a comment in the code about it here: https://github.com/gatsbyjs/gatsby/blob/afb06d7167d1fcb318f9d2ab23c762c0069b61a7/packages/gatsby-react-router-scroll/src/scroll-handler.tsx#L81

nikolay543 commented 2 years ago

So for everybody that is currently experiencing the issue - Replace your internal links with the <Link> component. Since gatsby has overwritten some of the browser behavior, you need to use their component instead of normal <a> links to preserve the scroll position.