Maintain scroll position after async postback from update panel

Question

I'm having some troubles with asp.net and update panel. The problem is, that every time partial postback occurs from update panel, page is scrolled back to top. On most of my pages this is not such a big problem, but on some pages can get quite long. Then, when user is on bottom of page, I show jQuery popup with RadListView in it, and user can select element in this list. But clicking on this element causes partial postback and page jumps back to the top.

I've looked through internet and could not find any solution to my problem. Of course setting MaintainScrollPositionOnPostback does nothing.

Does anyone know anything that could help me deal with this problem?

Cheers, Pako

Answer 1

There is a little workaround for this, that I've used in an ERP long time ago. Not sure if it's the best solution, but it works.

I don't know if you use a custom Page class or the default System.Web.UI.Page one, but, I'll try to explain to you how you do it, and then you find out the best way you can implement it in your environment, alright?

You'll create a HiddenField, for example, with the ID "hfScrollPosition".

Then, you'll make a javascript event: document.onscroll or something like that, and inside the event you'll update the hidden field to get the current scroll position. For example: document.getElementById("hfScrollPosition").value = document.documentElement.scrollTop;

Doing that, you'll have an ASP.NET control updating its value dinamically, according to the body scroll position. So, when some control in your page makes a postback, you can put the following javascript code in your Page_Load event:

document.documentElement.scrollTop = document.getElementById("hfScrollPosition").value;

So, everytime your page gets a postback, the body scroll position will be correctly updated.

---

EDIT: I've made a fiddle to simulate it: https://jsfiddle.net/j26fpgzo/