08 March 2010
Scroll Sneak: maintaining scroll position between page loads
Normally, when you scroll down a web page and click on a link, the scroll bar jumps back to the top when the new page is loaded. Every once in a while, you might find yourself in a scenario where it would have been nice if the scroll bars remained where you had them when you clicked the link. This inspired me to come up with “Scroll Sneak”,* to see what I’m talking about, try out the scroll sneak demo.
It’s something that will generally go unnoticed when experienced, but it will also prevent the mild aggravation that arises from undesired functionality—a page jumping back to the top when you wished it didn’t.
How it works:
- click handlers are applied to the links that should maintain the scroll bar position between page loads
- when one of those links is clicked, the click handler grabs the scroll position from the window or document object and stores it as a string on the window.name object and then allows the new page to load
- when a page loads, the window.name object is checked to see if a scroll position has been stored in it, and if it has one, it scrolls to that position
When it’s useful:
You can get a pretty similar experience by just loading new content on the page with ajax (no new page, so scroll bars don’t move). However, sometimes you may want to load a new page on each click, either you want to make content more accessible to search engines for SEO purposes (just make sure you’re not generating a bunch of duplicate content) or you’re lazy/don’t have time to turn static pages into ajaxy ones. Specific cases include…
A page that uses tab links near the top. This is used on the current result page design on Hunch:
A picture slide show. Time’s “Pictures of the week”, could benefit from this:
I saw a similar slide show use a hash on the navigation links (e.g. a url like "page123.html#slideshow"). This is a simpler solution to this problem, which is nice, because it’s a lot less work, but it’s not as fluid as remembering the exact same scroll position as the prior page.
Images that affect the height of a page should be given height and width dimensions, otherwise they might screw up the scrolling on page loads before the images have loaded.
That’s Scroll Sneak… enjoy!