• - -
  • Home
  • Asp.net
  • Jquery
  • Ajax
  • Sql Server
  • Social Api
  • Win Forms
  • Contact Us
  • Maintain scroll postion on Div after postbach in asp.net

    In the below HTML markup I have an HTML DIV with vertical scrollbar for which we will maintain the scroll position on PostBack, an HTML HiddenField and an ASP.Net Button to perform PostBack.

    When the Button is clicked and the form is submitted i.e. on PostBack, the value of the HiddenField is posted to the server which can be retrieved using the Request Form collection by supplying the name of the HiddenField.

    Inside the window onload event of the page, the value of the HiddenField is retrieved from the Request Form collection, the extracted value is the scroll position of the HTML DIV saved earlier and is now used to set the scroll position of the HTML DIV.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>Maintain Scroll on Div after postback</title>
      <script type="text/javascript">
      window.onload = function () {
      var div = document.getElementById("divItem");
      var div_position = document.getElementById("div_position");
      var position = parseInt('<%=Request.Form["div_position"] %>');
      if (isNaN(position)) {
      position = 0;
      }
      div.scrollTop = position;
      div.onscroll = function () {
      div_position.value = div.scrollTop;
      };
      };
      </script>
    </head>
    <body>
      <form id="form1" runat="server">
      <h1>Maintain Scroll on Div after postback</h1>
      <div id="divItem" style="overflow-y: scroll; height: 260px; width: 400px">
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
       5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      9. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      10. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
       11. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      12. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      13. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
       14. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      15. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      16. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      17. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      18. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      19. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
       20. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      21. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      22. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      23. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      24. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      25. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
      </div>
      <hr />
      <input type="hidden" id="div_position" name="div_position" />
      <asp:Button Text="Submit" runat="server" />

      </form>
    </body>
    </html

    Demo :


    Category:  Asp  .Net  ,Jquery  ,JavaScript  

    Demo


Recent Post

  • SQL server insert multiple rows with one statement
  • QR code generator in asp.net
  • COVID-19 Live updates of the world through api
  • Using Canvas to save Signatures as image using jQuery
  • Geo Location Demo using IP Address in jQuery
  • AJAX UpdateProgress in ModalPopupExtender in ASP.Net
  • Find waypoints between two cities using Google Map API
  • Remove Last Comma from String in jQuery
  • How we Create fibonacci series In sql server
  • How To Escape % Sign From Like Command in SQL Server
  • Add/Remove Items from One CheckBoxList to other using C#
  • Change textbox background color after focus in jquery in Html or Asp.net page
  • Display Image preview before upload in Asp.net or HTML and Jquery
  • Maintain scroll postion on Div after postbach in asp.net
  • Asp.Net Dynamically Change (Add) Meta Tags or Page Title & Description in C#
AspdotnetCode

Tags

Asp.Net

Jquery

Json

JavaScript

Tricks

Tips

RadioButtonList

ListBox

Polymorphism

CheckBoxList

LightBoxEffect

DataGridview

YouTube

web.config

Progressbar

Google MAPS

AutoComplete

Windows

News

Article

Error

SqlServer

Plugins Errors

AjaxAsyncFileUpload

validations

Twitter

Windows Service

DatePicker

ExportGridviewData

Statistics

Header on Scroll

Accordion Menu

Global.asax

ToolTip

Modalpopup

  • Home
  • |
  • About Us
  • |
  • Contact Us
Visitor Counter