Scroll to view in ajax page

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>

Answers


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/


Need Your Help

SerialPort reading process doesn't work properly in C#

c# serial-port arduino

I'm developing an application which communicates with my electronic circuit via Port 4. I can send data from the PC to the circuit without a problem; I then get data back from the circuit. However,...