Restoring Scroll Position

Posted: July 3, 2011 in ASP.Net, JavaScript
Tags: ,

Suppose you are searching for a product in a shopping website and you got a big set of results. It normally comes in a grid view with a long scroll bar. Sometimes you scrolled to some end and selected a particular product and suppose because of some reason or you clicked some button and page got posted back. Normally now a days because of Ajax nobody does page post back. However, suppose it happened and now page again rendered. Now user has to again scroll the page to find out his/her product. From User Experience point of view it is not good and it is really annoying to scroll to multiple times when your page got posted.

Therefore, we should keep the record of last scrolled position before rendering the grid view. We can do this by using one hidden field to store the last scrolled positions and we have to update the hidden field whenever user will scroll the page. While rendering the page we have to read the scroll position from the hidden field and set it to the page. This way we can solve our problem. I know there are multiple ways to do it.

In my below example I have one div with id “me” and inside this div suppose I have a gridview or table with multiple rows.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="scroll.aspx.cs" Inherits="scroll" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div.demo
        {
            background: #CCCCCC none repeat scroll 0 0;
            border: 3px solid #666666;
            margin: 5px;
            padding: 5px;
            position: relative;
            width: 200px;
            height: 100px;
            overflow: auto;
        }
        p
        {
            margin: 10px;
            padding: 5px;
            border: 2px solid #666;
            width: 1000px;
            height: 1000px;
        }
    </style>

</head>
<body>
   <form id="form1" runat="server">
<input type="hidden" runat="server"  id="hdnPos"/>

//you can put your grid inside this div
<div class="demo" id="me">
       <table>
//Multiple rows are there need vertical scroll bar and fixed height.
</table>
</div>
//button to do postback and check if the scroll position is maintained or not.
<asp:Button ID="Button1" runat="server" Text="Button" />

//Javascript code required for getting and setting the scroll position of the grid div.
<script type="text/javascript">
        //getting hidden field and grid id.
        var
        hdn = document.getElementById("hdnPos"),
        gridDiv = document.getElementById("me");
        //storing top left scroll position on scroll
        gridDiv.onscroll = function(e) {
            var
            x = gridDiv.scrollTop,
            y = gridDiv.scrollLeft;
            hdn.value = x + "," + y;
        }
        //restoring the top left position on each load.
        window.onload = function(e) {
            var token = hdn.value.split(",");
            gridDiv.scrollTop = token[0] | 0;
            gridDiv.scrollLeft = token[1] | 0;
        }
    </script>
    </form>
    </body>
</html>

Advertisements
Comments
  1. Vinod says:

    hello sir i am trying this thig but not working for me,
    my problem is ,i am using popup user control in that i am using grid with scrollabe div, but when click button inside grid div scroll on to top ,i am trying so many example but not work …
    pls help me sir…..

    pages flow is
    Master page >> Aspx Content page >> User Control >> div >> grid >>clickble button

    thanks in advance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s