• Skip to main content
  • Skip to primary sidebar

Technical Notes Of
Ehi Kioya

Technical Notes Of Ehi Kioya

  • About
  • Contact
MENUMENU
  • Blog Home
  • AWS, Azure, Cloud
  • Backend (Server-Side)
  • Frontend (Client-Side)
  • SharePoint
  • Tools & Resources
    • CM/IN Ruler
    • URL Decoder
    • Text Hasher
    • Word Count
    • IP Lookup
  • Linux & Servers
  • Zero Code Tech
  • WordPress
  • Musings
  • More
    Categories
    • Cloud
    • Server-Side
    • Front-End
    • SharePoint
    • Tools
    • Linux
    • Zero Code
    • WordPress
    • Musings
Home » Frontend (Client-Side) » Maintain Scroll Position On PostBack Using JavaScript

Maintain Scroll Position On PostBack Using JavaScript

By Ehi Kioya 1 Comment

Developers often encounter situations where they need to maintain scroll position on a control after a postback to the server has occurred.

Take the following scenario:

Say you have a web form containing a div that contains a datalist. The rows of your datalist, (along with other controls) contain checkboxes. Now every time a checkbox is checked and unchecked, you need to do some server side validation in code before letting the user proceed.

Your datalist contains tons of rows and by default, each time a validation occurs, the datalist “refreshes” and scrolls back to the top. This can easily get annoying for users and can ruin the general user experience. But we can fix it with a bit of JavaScript 🙂

This explanation is based on C# and ASP.NET but you can easily apply the principle to any language.

First add a hidden dummy input to your form. Since it’s hidden, you can just add it anywhere. Like this:

<input id="Y" type="hidden" name ="Y" runat="server" />

Now add the following JavaScript code to the relevant section of your HTML:

<script type="text/javascript">
    function getScrollPosition()
    {
        var y;
        if (document.getElementById('divDatalist').scrollTop)
        {
            y = document.getElementById('divDatalist').scrollTop;
        }
        else
        {
            y = document.body.scrollTop;
        }

        document.getElementById('<%= Y.ClientID %>').value = y;
        //alert(document.getElementById('<%= Y.ClientID %>').value);
    }
    function setScrollPosition()
    {
        var y = document.getElementById('<%= Y.ClientID %>').value;
        //alert(document.getElementById('<%= Y.ClientID %>').value);
        if (y == null)
        {
            //alert('Bad Hidden Field Id!');
        }
        else
        {
            document.getElementById('divDatalist').scrollTop = y;
        }
    }
   window.setInterval('getScrollPosition()', 350);
   window.onload = setScrollPosition;
</script>

That’s it. You’re done.

The scroll position on your datalist will now be maintained after postback.

Note: ASP.NET has the MaintainScrollPositionOnPostback page directive which gets or sets a value indicating whether to return the user to the same position in the client browser after postback. This can be set to true to maintain scroll position on the page after postback. However, this will not work for a datalist within a div. To handle embedded controls like that, use the JavaScript code given above.

Found this article valuable? Want to show your appreciation? Here are some options:

  1. Spread the word! Use these buttons to share this link on your favorite social media sites.
  2. Help me share this on . . .

    • Facebook
    • Twitter
    • LinkedIn
    • Reddit
    • Tumblr
    • Pinterest
    • Pocket
    • Telegram
    • WhatsApp
    • Skype
  3. Sign up to join my audience and receive email notifications when I publish new content.
  4. Contribute by adding a comment using the comments section below.
  5. Follow me on Twitter, LinkedIn, and Facebook.

Related

Filed Under: Frontend (Client-Side), JavaScript Tagged With: JavaScript, Programming

About Ehi Kioya

I am a Toronto-based Software Engineer. I run this website as part hobby and part business.

To share your thoughts or get help with any of my posts, please drop a comment at the appropriate link.

You can contact me using the form on this page. I'm also on Twitter, LinkedIn, and Facebook.

Reader Interactions

Comments

  1. Santosh Bind says

    February 19, 2018 at 6:30 am

    Very Nice it is work for me.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

23,569
Followers
Follow
30,000
Connections
Connect
14,568
Page Fans
Like
  • Recently   Popular   Posts   &   Pages
  • Actual Size Online Ruler Actual Size Online Ruler
    I created this page to measure your screen resolution and produce an online ruler of actual size. It's powered with JavaScript and HTML5.
  • Fix For “Function create_function() is deprecated” In PHP 7.2 Fix For "Function create_function() is deprecated" In PHP 7.2
    As of PHP 7.2 create_function() has been deprecated because it uses eval(). You should replace it with an anonymous function instead.
  • How To Change A SharePoint List Or Library URL How To Change A SharePoint List Or Library URL
    All versions of the SharePoint user interface provide an option to change the title (or display name) of a list or library. Changing SharePoint library URL (or internal name), however, is not exactly very intuitive. We will discuss the process in this article.
  • About
  • Contact

© 2022   ·   Ehi Kioya   ·   All Rights Reserved
Privacy Policy