Javascript 滚动到ajax页面中查看_Javascript_Jquery_Html_Scroll_Overflow

Javascript 滚动到ajax页面中查看

javascript jquery html scroll

Javascript 滚动到ajax页面中查看,javascript,jquery,html,scroll,overflow,Javascript,Jquery,Html,Scroll,Overflow,情况是这样的：我有一个自动溢出的div，其中包含一个表。包含此div的页面被压缩到主页面中。我想要一个javascript（jquery很好）方法在ajaxed页面加载上运行，该加载将div滚动到具有id的特定tr。执行此操作的最佳方法是什么？我在下面添加了一个小规模的示例尝试调整ajax调用以包括scrolltoview（url#id）[结果：未找到404错误对象] jquery scrollTop[结果：当前正在测试。没有出现滚动] AJAX页面 <%@ Page Languag

情况是这样的：我有一个自动溢出的div，其中包含一个表。包含此div的页面被压缩到主页面中。我想要一个javascript（jquery很好）方法在ajaxed页面加载上运行，该加载将div滚动到具有id的特定tr。执行此操作的最佳方法是什么？我在下面添加了一个小规模的示例

尝试

调整ajax调用以包括scrolltoview（url#id）[结果：未找到404错误对象]

jquery scrollTop[结果：当前正在测试。没有出现滚动]

AJAX页面

<%@ 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>


$（文档）.ready（函数（）{
$（“#divy”）.scrollTop（$（“#25”）.position（）.top）；
});

AJAX CS（只是为了方便地填充表）

使用系统；
使用System.Web；
使用System.Web.UI；
使用System.Web.UI.HTMLControl；
使用System.Data.SqlClient；
使用System.Web.UI.WebControl；
名称空间APTEIT
{
/*import.aspx的代码隐藏*/
公共类滚动测试：第页
{
公共滚动测试（）
{
}
受保护的无效页面加载（）
{
回答。写（“”）；
回答。写下（“数字单”）；
对于（int i=0；i<100；i++）
{
回答。写（“+i+”thingy“+i+”）；
}
回答。写（“”）；
}
}
}

主页（不包括ajax方法。只需使用ajax页面的异步加载填充“divy2”）


$（文档）.ready（函数（）{
ajax（“scrolltest.aspx”、“divy2”）；
});

您可以使用查找

TR

相对于父

DIV

的位置，然后使用将

DIV

滚动条设置到

TR

元素的顶部

因此，您可以使用以下内容：

$（“div”）.scrollTop（$（“div tr#id”）.position（）.top）；
我在这里设置了一个例子：
@Nikhil还没有为这个函数编写任何javascript。我正在准备发布一个较小的HTML示例，但现在它是一个整体的较大部分。我正在寻找一些关于如何首先开始的方向。@Nikhil我已经在上面添加了一些代码，以提供一个我正在尝试做的示例。这对我不起作用。我已将尝试的代码添加到OP中以供参考。这可能是因为该页被Ajax插入了吗？您应该在将数据加载到divy2
之后执行这一行，而不仅仅是在文档准备就绪时。最好的方法是将它与成功处理程序中的ajax（）调用集成，因为否则，在尝试更改滚动位置之前，不会向您保证数据已准备就绪。在ajax load上实现了一个处理程序。工作得很有魅力。谢谢
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>");
        }

    }
}

<%@ 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>