Maintain Scroll Position of EVERY Element on PostBacks

Update (5 Aug 2014):

I've uploaded the latest version of the script on github: https://github.com/hasheminezhad/scrollsaver

Introduction:

Normally when a page round trips to the server (or PostBack happens), the scroll position of the page resets and the user has to scroll back to the part where he/she was doing something. One of the nice little features in ASP.NET 2 is a page property called 'MaintainScrollPositionOnPostback' which as its name suggests, takes care of it in a way that just can't get any easier!
But the problem here is that, there may be other scroll bars in page (such as MultiLine TextBoxes, ListBoxes, ...) which there's no simple way to maintain their positions on postbacks. This situation gets even worse as we place UpdatePanels in the page and while there's [or seems to be] no postbacks, still scroll bars reset to zero on each request. As I couldn't find any SIMPLE solution for this, I tried to solve the problem myself and the result was a simple yet powerful script which I present it here.

How to use:

There are two versions of the script available for download. Normal version (scrollsaver.js) is the main script which I attached just in case anyone wants to figure out how this all works and maybe fix its bugs and the minified version (scrollsaver.min.js) which is the one that you should actually use.
In order to use the script all you need is to add a reference to it anywhere in the page. The script takes care of everything else for you. Even if you have UpdatePanels, it'll detect them and still maintains scroll positions seamlessly. Just remember that only the scroll position of the elements which have their ID attribute set, can be maintained by this script!

<script type="text/javascript" src="scrollsaver.min.js"></script>

How does it work:

Actually the idea isn't something new or unexpected at all! The Idea is just to simply store the scroll position of each element (along with window's scroll position) in a cookie before PostBack (or partial PostBack) and after the page comes back from the server, restore the scroll position of elements.
The biggest challenge is how to recognize elements after PostBack! The solution I used is to assume that all the elements have ID attribute. This assumption is not really far from reality, because normally when you place ASP.NET elements on the page, they have ID attribute and ASP.NET [somehow] manages to make this ID unique on client side which is great for our situation. The actual problem is when we place HTML tags like "div" directly in a page, which then we should double check them to have their ID attribute set. I suggest that besides ID attribute, add a runat="server" to the controls to ensure unique IDs on client side too.
The other [fairly simple] challenge is how to manage UpdatePanels which that's where add_beginRequest and add_endRequest comes in handy.
This solution is not server related so this script should simply work with any other platform (like JSP, PHP, ...) without any changes.

Browser Compatibility:

I've tested this script with major browser including IE(6+), FF(2+), Opera(9.6+), Chrome(1+) and Safari(3.2). Actually there's no [known to me] browser which this script can't handle!
The only problem in tests was with IE6 and Opera which both had problem handling scroll position of 'select' elements (that's ListBox in ASP.NET). The strange part is that even the latest release of Opera (Opera 10.0 Beta 3 - Build 1699) has this bug in it! Unfortunately I couldn't find any workarounds for this, so the script has problem handling scroll position of ListBoxs in IE6 and Opera!

Attachments:

I've attached two versions of this script (minified and normal) along with a demo project to this article.

AttachmentSize
scrollsaver.min_.zip894 bytes
scrollsaver.zip1.03 KB
ScrollSaver-WebSite.zip56.76 KB

Comments

Not working in ASP.NET 1.1

if (typeof Sys != 'undefined' && typeof Sys.WebForms != 'undefined') is giving NULL.

I have tested in IE 6 , IE 7 and IE 8.

Please help!.

Biswa

Thank you!

Thank you very much! God bless you!

T - From Romania

NICE

nice dude.. thanks...

Indian

Thanks a lot..
It's Very usefull..

THANK YOU THANK YOU

you are the man...i only had to search for 2 hours, but i'm SOOOO happy i came across this

Very helpful

This is superb.

Indian.

Thanks!

This worked perfectly for me.

David Wright

Great job Thanks a bunch

Thanks you, Your script work perfectly after searching for a while
I am trying to convert existing website to AJAX but there are so many to deal with

Not working on auto postback for page in root folder

Hello Mahdi~

Thanks for sharing this with us.

I'm having a similar problem as others have posted below. The scrip does not seem to work for pages in the root folder. It works fine on my local machine and It works fine when I run it on the local server, but does not work when I run it from the server on a remote client. When I press F5 though it seems to work?

Could this be an issue with the way the positions are saved using cookies? Is there a configuration I need to change on the server? Any suggestions for modifying the script?

Thanks in advance!

Richard

Re: Not working on auto postback for page in root folder

Hi,

As always: could you provide a sample for me? I couldn't reproduce the problem in any way!

Thanks

IE9

Thanks for the script, it works on IE8 but don't in IE9 :(

IE9

I've tested it with IE 9 (version 9.0.8112.16421 on windows 7 64bit) and it works fine! do you have problem with the same version?

Rigin

Ya its true, it worked... i have ben behind this problm for few time

scroll saver

AMAZING, thankyou you beautiful person!

Thank You

Thank You so much

Very helpful

Thank you! Just what I needed :)

THANKS!

You, my friend, are a super-hero. Thanks so much.

Thank You So Much!!!!

This is the only solution that has worked for my project!

Great script

After 3 days of trial and error this script fixed my problem at once. It works in Konqueror 3, btw.

Excellent My Friend Works fine on IE 8

Great Job my friend. Works fine on my project with IE 8!!!

Maintain Scroll Position of on PostBacks

After spending a whole day and trying different samples got this ... this worked like a charm.

Thank you

Excellent

Thank you very much. My problem is solved. Thank you for great work.
Ch.

It does not work on a website's root folder

Hi,
Thanks for your code,
It works fine on any page which is located in a sub-folder like www.myurl.com/folder/mypage.html
However, i can't make it work on any website's root folder, like www.myurl.com/mypage.html

Is there any problem with the cookie as it seems to only stores a "/" as the page reference?

Thanks for your help.

Re: It does not work on a website's root folder

Hi,
Unfortunately I couldn't reproduce the problem! It works just fine for me both ways. Could you provide me with a sample buggy page?

I have similar problem... in

I have similar problem... in localhost environment it works, but not in hosted server (GoDaddy)..

It does not work on a website's root folder

Hi,
Thanks for your code,
It works fine on any page which is located in a sub-folder like www.myurl.com/folder/mypage.html
However, i can't make it work on any website's root folder, like www.myurl.com/mypage.html

Is there any problem with the cookie as it seems to only stores a "/" as the page reference?

Thanks for your help.

Maintain Scroll Position of EVERY Element on PostBacks

Hi,
I don't have any idea. In fact that's the situation I've tested before, without any problems! Could you send me a sample buggy page?

This is magical code thank

This is magical code
thank you

Perfect

So usefull. Thanks.
I was your student in sadjad university, I think.
Thanks again.

Hamid Darabi
Fanaa

Not server related?

Hi, and thank you very much for a such a good little script. It works like a charm on my apache/php localhost, as well as on one of my external servers, which both run the same website. Those are mostly just for testing, but for some reason it does not work on my clients server. I just cannot figure out why, as truly the little script should not be server related. Javascript itself is all client side anyhow, so apart from having a wrong filename or corruption in the upload process, what could be the reason that it does work on my local and one of the external servers, but in the third, the clients server it does not.

Maintaining scroll position

This is superb many thanks!!!

Maintain Scroll Position of EVERY Element on PostBacks

we are not sure if cookies are enabled in client system, is there any other go to store the scrolled values instead of using cookies

Maintain Scroll Position of EVERY Element on PostBacks

In that case, we could use querystring, but that's a little bit ugly!
Another possible solution is to get a little help from server side. We could store values in a hidden field and use in server just post them back to the client.

Good Job Sir!

Spent whole day looking for an answer on maintaining Listbox's scroll position on postback. This one Rocks!! Please keep up the good work! Thanks for sharing! God Bless =)

Great

Great, but what I was really looking for was for it to work in IE6.

Maintain Scrollback position for every element on postback

Great solution. Very easy to implement and works great. I had tried other solutions without much success. Thank you!

Re: Maintain Scroll Position of EVERY Element on PostBacks

Hi Mahdi,

Thanks for this code.

I've used the scrollsaver.min.js in a classic ASP (version 1.1) application. It works a threat!

All the best,

Leniel Macaferi
http://www.leniel.net/

Thank you

Thank you very much, been looking for a decent easy to implement solution to this problem!

Fantastic

Thanks this was just what I was after, its amazing

Scrollsaver

Thx, best solution I've seen. Can drop custom ListControl that solved that problem, but brought other ones.

T.

Re: Maintain Scroll Position of EVERY Element on PostBacks

Hi Mahdi,

Thanks for this code.

I've used the scrollsaver.min.js in a classic ASP (version 1.1) application. It works a threat!

All the best,

Leniel Macaferi
http://www.leniel.net/

Manual Scrolling

Great idea, very clever. This script is very useful, but I've noticed an unwanted side effect after postback. The scroll position restored on a ListBox it is correct, but if you try to scroll the list w/ the mouse after postback, it unexpectedly jumps back to the top of the list when using the mouse. Have you noticed this behavior? If so, is there any way around it?

Thanks,
Troy

Doesn't work for me

I added the script to my page tried to select something from a dropdownlist which would postback because I selected "other" as one of the options that shows a please specify box. When I selected "other" the scrollbar didn't remain in its same position, instead it scrolled back to the top...as usual. Any pointers, ideas of what may be happening? thanks

Sample

I didn't actually get what happened there! DropDownList has no scroll bars, so which scroll bar are you talking about?
Could you please send a sample page so that I'd be able to recreate the problem? If not, could you test it with other browsers too? or at least a screen-shot would be nice.

Maintain Scroll Position of EVERY Element on PostBacks

it's very useful. Thanks.
nick.