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:

  1. 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!

    ReplyDelete
  2. 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...

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

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

    ReplyDelete
  5. Another big thank from 2012.

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

    ReplyDelete
  7. Thanks Thanks Thanks Thanks Thanks

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

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

    ReplyDelete
  10. 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.

    ReplyDelete
  11. Like a charm! Thank you! :)

    ReplyDelete
  12. This is awesome, thank you so much.

    ReplyDelete
  13. 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

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

    Thanks!

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

    ReplyDelete
  16. Doesn't work on mobile safari

    ReplyDelete
  17. 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!

    ReplyDelete
  18. It Works perfectly. Thank You.

    ReplyDelete
  19. Great Job Man!!

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

    Thank you so much!

    ReplyDelete
  21. 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

    ReplyDelete
  22. Great stuff! Thanks!!

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

    ReplyDelete
  24. Hi

    Does this solution work with Classic ASP. Thanks.

    David

    ReplyDelete
  25. This comment has been removed by the author.

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

    ReplyDelete
  27. thank you... it help much..

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

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

    ReplyDelete
  30. 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!

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

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

    ReplyDelete
  33. 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.

    ReplyDelete
  34. 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

    ReplyDelete
  35. 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

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

    ReplyDelete
  37. 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.

    ReplyDelete