26 September 2009

Javascript ScrollFix: Remember scroll position after page reloads.

I've seen a tonne of great web apps with this annoying quirk: When you press save or OK on a settings page, it  jumps back to the top as the page reloads. Even some high profile products like Gmail have this irritating usability issue. (Try merging 2 contacts at the bottom of your list and watch the list jump back to the top)

This little bit of javascript saves a cookie when the page is unloaded and attempts to read it and set the scroll position the next time the page is loaded.
Implementation is a cinch:

THE FILE: (Please see right hand pane before download!)
http://www.crondesign.com/projects/downloads/scrollfix.js


IN HEAD:
<script src="scrollfix.js" type="text/javascript"></script>


BODY TAG:
<body onunload="unloadP('UniquePageNameHereScroll')" onload="loadP('
UniquePageNameHereScroll')">

33 comments:

Daniel said...

I love you! there are so many messy, confusing, ugly suggested solutions for this issues that end up not working at all.

this is clean, easy, and .... IT WORKS!

Mitch said...

Awesome script, but when I click on a link on my site it automatically scrolls down as far as I was on the previous page.
Any idea how to fix this minor bug?
Thanks in advance...

cron said...

Hi Mitch, you need to keep the page names unique or it will read the cookie from the previous page!

Anonymous said...

Great!!!

Meshaal Al-Saffar said...

Thanks a lot.
Since 2009 and your post is still very useful.
It resolved a big problem.

Anonymous said...

Another big thank from 2012.

Anonymous said...

great job. This helped out alot with our old classic asp application.

Anonymous said...

Thanks Thanks Thanks Thanks Thanks

ronan said...

Nice one....

spilpoker said...

only problem is it uses BODY TAG.
can you make code without it.

Ciarán O'Kelly said...

@spilpoker Try:
window.onunload = function(){
unloadP('UniquePageNameHereScroll')
}

spilpoker said...

thank you for your reply
added your code to the bottom of the scrollfix.js script don´t know if it work cause only have the scroll problem in,internet explore, tested in ie 8 and 9
and have tried lots of other scripts no one works
so maybe i cant be done in those browsers.

Anonymous said...

Like a charm! Thank you! :)

Anonymous said...

This is awesome, thank you so much.

ZeroSub said...

Awesome that did the trick, had some probs with refreshing iframes, that i would love to if they could remember their scroll positions and this defenetly is doing the trick

Thanks again

Anonymous said...

Great solution! However it's not working for me on iOS (Mobile Safari.) Any tips on making it work with that?

Thanks!

Anonymous said...

After wasting couple hours testing other solutions, finally I got here. Works perfectly.

ferile said...

Doesn't work on mobile safari

Anonymous said...

What a brilliant article, thank you so much for that... Cos I've spent searching for that topic on Google for nearly two days! None of these helps, so this one helps me alot, THANK YOU!

edo said...

It Works perfectly. Thank You.

Anonymous said...

Great Job Man!!

Anonymous said...

So great. I have searched the solution for several days.

Thank you so much!

kennedy kanyi said...

wow!!!!great

Anonymous said...

I'm sorry but I can't get it to work. Probably because I'm very new to web development and not sure what I am doing.
I have a very wide picture in a div with horizontal scroll. The picture has hot spots to other pages.
On return I would like to be where I was originally.
I note the js file is called fixscroll.js but the script in the head calls for scrollfix.js.
Also what is the unique page name? Name of the HTML page or the jpg image
I hope you can help
Chris

Anonymous said...

Great stuff! Thanks!!

Driss said...

thxxxxxxxxxxx u a lot, i searched this for a long time
anothor thanks from 2015 :D

Anonymous said...

Hi

Does this solution work with Classic ASP. Thanks.

David

hasan basri şahin said...
This comment has been removed by the author.
duby bb said...

Thank you very much.. this code really helped me!!

Anonymous said...

thank you... it help much..

Anonymous said...

Just found this post by chance. Tested the code and all great - thanks.

Meiqing Xu said...

coach outlet
michael kors handbags
longchamp bags
adidas nmd
michael kors outlet online
polo ralph lauren outlet online
cheap mlb jerseys
coach factory outlet
cheap uggs
cheap uggs
20161228caiyan

Unknown said...

This is very good script. you are perfect. thank you!!

Post a Comment

Cron Design Studio: Dublin based web design & software development