1

I need to trigger a page reload, via JS, preserving the vertical scroll position.

I'm using the solution described in another SO question:

  1. Calculate the current scroll position
  2. Add the current position as a querystring argument, then redirect
  3. When the page reloads, read the value from the querystring & adjust the scroll pos

However, I only want to restore the scroll position on that FIRST redirect. If the user scrolls around the page and then triggers a manual reload using Ctrl-R, I do NOT want to re-scroll to that saved position.

Is there some way of passing a single-use, visible-to-the-next-request-only value using ONLY JavaScript? Or from removing a value from document.location.href without redirecting?

Should I be using the HTML 5 History API to "clear" the position value after I've consumed it?

Community
  • 1
  • 1
Seth Petry-Johnson
  • 11,845
  • 7
  • 49
  • 69
  • My first thought is to use a cookie/session to store that variable, then delete it after you've used it. – Populus Jan 31 '14 at 16:43
  • @Populus, I thought about using cookies too but can't use a fixed cookie name, else I might run into issues if one user has multiple tabs open to different pages, each trying to use this feature. Though just like w/ localStorage I suppose I could use the full URL to generate a unique cookie name to avoid collisions. – Seth Petry-Johnson Jan 31 '14 at 20:42
  • how about if you didn't refresh the entire page, but just the portion that needs refreshing? – Populus Jan 31 '14 at 20:57
  • @Populus that's the long term goal, but in this particular case I do need a full page refresh – Seth Petry-Johnson Jan 31 '14 at 21:46

1 Answers1

2

Save the value to sessionStorage. Once you use it, delete the value so it cannot be read on a manual refresh.

sessionStorage.setItem("scroll_position", "300");
sessionStorage.getItem("scroll_position"); // 300
sessionStorage.removeItem("scroll_position");

sessionStorage is really well-supported -- it'll will work fine for IE8+ any relevant version of the other browsers.

StackOverflow handles after-page-load scrolling by storing post id's in the URL hash. You could do that as well.

The url stackoverflow.com/...../21485393#21485393 has #21485393 which matches an anchor element <a name="21485393"></a> It will automatically scroll to that element after the page loads.

You could do something like that as well.

http://your.url.com/page#300

Retrieve it with

window.location.hash

And remove it once you're done by

window.location.hash = ""
Community
  • 1
  • 1
Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
  • Was halfway through suggesting the same thing! – ChrisIPowell Jan 31 '14 at 16:44
  • localStorage is awesome. It's so widely supported... such ninja – Cory Danielson Jan 31 '14 at 16:54
  • I thought about localStorage but thought it was a per-browser store, not a per-browser-tab store, which means I might have issues if users have multiple tabs open. I suppose I could just use the full URL when building a key... – Seth Petry-Johnson Jan 31 '14 at 20:40
  • edited my answer. Use sessionStorage instead. It's a localStorage instance that is unique to tabs/windows (even of the same url) and works exactly like localStorage. see http://stackoverflow.com/questions/9742395/scope-of-sessionstorage-and-localstorage – Cory Danielson Jan 31 '14 at 20:50
  • even better! And yeah, can't believe IE8 supports it! – ChrisIPowell Feb 01 '14 at 11:14