Home/ Questions/Q 8152289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T15:39:56+00:00

The situation is this: I have a div with overflow auto containing a table.

  • 0

The situation is this:
I have a div with overflow auto containing a table. The page containing this div is ajaxed into a main page. I want a javascript (jquery is fine) method to run on the ajaxed page load that scrolls the div to a certain tr with an id. What’s the best method to do this? I’ve added a small scale example below.

ATTEMPTED

adjusting ajax call to include scrolltoview (url#id) [Result: 404 error object not found]

jquery scrollTop [Result:currently testing. no scrolling occuring]

AJAX Page

<%@ Page Language="C#" Inherits="APTEIT.scrolltest" %>
<script src="Utilities/Javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#divy").scrollTop($("#25").position().top);
    });
</script>

AJAX CS (just to populate the table easily)

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Web.UI.WebControls;

namespace APTEIT
{
    /*Codebehind for import.aspx*/
    public class scrolltest: Page
    {
        public scrolltest()
        {
        }

        protected void Page_Load()
        {
            Response.Write("<div style=\"overflow:auto;border-style:solid;border-width:2px;border-color:Black;height:200px;width:200px;\" id=\"divy\">");
            Response.Write("<table style=\"border-collapse:collapse\"><tr><th>Number</th><th>Thingy</th></tr>");
            for(int i = 0; i < 100; i++)
            {
                Response.Write("<tr id=\"" + i + "\"><td style=\"border-style:solid;border-width:1px;border-color:black;\">" + i + "</td><td style=\"border-style:solid;border-width:1px;border-color:black;\">thingy" + i + "</td></tr>");
            }
            Response.Write("</table></div>");
        }

    }
}

Main Page(ajax method not included. simply fills “divy2” with asynchronous load of ajax page)

<%@ Page Language="C#" %>
<html>
<head>
<script src="Utilities/Javascript/Utilities.js"></script>
<script src="Utilities/Javascript/jquery-1.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        ajax("scrolltest.aspx", "divy2");
    });
</script>
<div id="divy2">

</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use .position() to find out the TR‘s position relative to the parent DIV, and then use .scrollTop() to set the DIV scroll bar to the top of the TR element.

    So, you can use something like this:
    $("div").scrollTop($("div tr#id").position().top);​

    I’ve set up an example of it here: http://jsfiddle.net/dvirazulay/7mQmD/

    • 0