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')">

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

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

Anonymous said...

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

Unknown said...

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

Anonymous 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!

Unknown 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

Unknown said...
This comment has been removed by the author.
Unknown 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.

Unknown said...

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

Zac said...

Hi there. I'm using php to include the page that I want to remember scroll position for. Basically, there is a vertical scrolling page with images which navigate to individual pages for those images. Each of the image pages includes the same vertical image menu. I am this close to just using a wordpress gallery plugin, but wondering if your script could work for my situation? Thanks!

Anonymous said...

Hi, thanks, your script works in new browsers almost 9 years after your publication, it's great!!!

Anonymous said...

I can only agree with all the positive comments above! So simple and so useful for my classic ASP site - thank you!

Kanhasoft said...

Kanhasoft is the PHP Application Development Company based in India and USA. We are promoting business services across USA, UK, Japan, Canada, Singapore, Australia, Sweden, Norway, Switzerland, New Zealand, Germany, South Africa and 45 more.

Zdeněk Šrámek said...

https://ifreegiveaways.net/hack-twitter-account/

Sophie Grace said...

Its as if you had a great grasp on the subject matter, but you forgot to include your readers. Perhaps you should think about this from more than one angle. To find The 8 Best Things to Do in Playa Maderas, Nicaragua Please go with site things to do

Anonymous said...

Is it suppose to show the top of the page first then jump to the last scroll position? or I am doing something wrong. help

Mission Hills said...

provides top quality vinyl wraps

Mikoshiba Sanae said...

only problem is it uses BODY TAG.
can you make code without it. The top Santa Ana Trucking Company

Unknown said...

best replica designer bags x49 d4z08c2n86 aaa replica bags e78 z3w88u5x39 gucci replica handbags j84 t1t92t5j34

ofeelianacey said...

Unemployment and lowered client discretionary income also remain key challenges to 강원랜드 쪽박걸 a speedy recovery. Also, since a big amount of cash spent on gambling is attributed to fit machines at areas such as motels and airports, the closures of airports and motels is affecting revenue era from these areas. Security and the safety of gamblers’ details remain probably the most discussed.

Post a Comment

Cron Design Studio: Dublin based web design & software development