Wednesday, November 18, 2009

ASP.Net, DNN and scroll position

In ASP.Net you can use the Page.MaintainScrollPositionPostBack to setup a page so that it remembers the scrolled location the user was at after a post-back has occurred. It is extremely useful on long pages that perform a post-back.

If you want the page to remember the scroll position you set the value to true, otherwise false.

But recently on a DotNetNuke page, we found that the scroll position was being remembered on a page, even though we were setting the Page.MaintainScrollPositionPostBack to false. We tried setting this value on the Page-Load event, as well as the event that was being fired after the post-back occurred – no luck – the page scrolled position was being remembered. The page we were working on had a multi-step Wizard control and it was really annoying when you moved from a long step to a short step, as the page wouldnt end up scrolling to the top.

After some digging we found that DNN had its own code to maintain the scroll position during post-backs. This scroll position is maintained using a hidden field called “ScrollTop”. DNN has javascript code that runs during a page load, that uses the ScrollTop value to set the windows scroll position. (I have no idea why DNN has this redundant functionality – when it is already present in Asp.Net via the MaintainScrollPositionPostBack property).

Anyways, we used JQuery to work around this issue. Basically, you perform a query to get the ScrollTop element and set its value to 0. This way, when DNN’s javascript code runs, it automatically scrolls to the top.

<script type="text/javascript" src="JQuery/js-jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
  jQuery.noConflict(); //needed to remove conflict of the alias $ that is already being used by DNN
  jQuery(document).ready(function() {
      jQuery("#ScrollTop").val(0);
  });
</script>

2 comments:

Anonymous said...

after hours of scowering the web, trying to implement various work arounds to get my doc to postback and scroll to top, i found this post and I thank you from the depths of my heart! 6 hours wasted, but thanks to you problem solved. could i recommend you post this solution on code-project & asp.net & dnn forum, as they are the places i naturally look, and im sure many others are having similar issues with dnn and setting the scroll position on post back. THANK YOU

Anonymous said...

Well, I only wasted 3 hours. Thanks, your post saved me heaps of time! BTW, I changed to ScrollTop value to 10000 cause I needed to scroll to the bottom of the page.