Page doesn't return to correct scroll position.

[hellonearthis]

When A link on a page is clicked, say from clicking on box() on #/reference/ the browser back button doesn't alway return to the position on the reference page was clicked on.

I think this stackoverflow explains the problem and a solution by using $(window).scrollTop(); to save the screens scroll position on unload in a cookie and then testing if there is a cookie and if there is setting the $(window).scrollTop(cookie); onload.

I don't know if this would work as I've not tested it.

[hellonearthis]

Looks like firefox has addressed this problem. https://www.ghacks.net/2019/01/14/firefox-66-scroll-anchoring-fixes-scroll-position-jumps-during-loading/

Looks like chrome does this here. chrome://flags/#enable-scroll-anchor-serialization

Just tested that and it's totally fixed now...

[andrewcowley]

I'm still seeing the issue as described by @hellonearthis in the first comment above. I.e scroll position isn't maintained when going from the reference list page to a specific function and back when using the back button. it is most noticeable when scrolling all of the way to the bottom of a long function reference page and then using the back button.

I don't think scroll anchoring implemented in browsers fixes this issue specifically.

I've tested on FF Developer edition (71.0b11), Chrome (70.0.3538.110) and Safari on iOS 12 and see the scroll position issue on all three browsers.

If this is something that needs fixing I'm happy to sort it out.

[limzykenneth]

@andrewcowley If you are willing to look into this that would be great. :)

[ffd8]

Just experienced this while preparing a tutorial for students. Going to the reference page and clicking on DOM works (scrolls to DOM group in both Chrome + Safari) but trying to link a tutorial to that section by using the DOM Group URL fails to jump to the anchor. Same is true when using the back button as mentioned in initial issue.

I think this could be solved by checking onload if there's a location.hash and if so, jumping to that section?
Don't have this repo downloaded/setup for building/testing.. but the following solution should work:

if (location.hash) location.href = location.hash;

edited above with a better solution from that SO that works perfect when run from the console.. nooo idea where to add to the actual p5-website.. forked.. installed.. gave a quick attempt.. but don't know the flow of things, so I'm guessing someone else could implement this much better and in the right place. Maybe it needs a shorttimeout() before jumping to hash.. or at the flag when the contents are all rendered on the main overview page.

[idontknowjs]

I could also reproduce this.

There is also one thing to be noticed that if the user has scrolled down a bit being on this page (meaning there is some value to window.pageYOffset which is !=0) and now when page is refreshed. The page does not scroll back to (0,0). Instead gets some value = 541 (window.pageYOffset)

But if the user has not scrolled down meaning the scroll position is equal to (0,0) and page is refreshed. The page does not get any YOffset value and remains at (0,0) only.

Depending on the scroll position of the page before refreshing the page. The scroll positon differs at page onload