单击asp.net链接按钮将焦点设置在页面顶部

Question

我有一个显示客户订单详细信息的asp.net数据网格。 使用数据列表和asp.net Linkbutton控件可以完成网格底部的分页。 这是代码：

<asp:DataList ID="DataList2" runat="server" CellPadding="1" CellSpacing="1" 
        OnItemCommand="DataList2_ItemCommand" 
        OnItemDataBound="DataList2_ItemDataBound" RepeatDirection="Horizontal">
    <ItemTemplate>
        <asp:LinkButton ID="lnkbtnPaging" runat="server" 
             CommandArgument='<%# Eval("PageIndex") %>'
             CommandName="lnkbtnPaging" 
             Text='<%# Eval("PageText") %>' />
        <asp:Label runat="server" ID="lblPageSeparator" Text=" | " name=></asp:Label>
    </ItemTemplate>
</asp:DataList>

当用户单击任何页码（即“链接”按钮）时，我需要将焦点放在页面顶部。

我该怎么做呢？

谢谢！

Answer 1

我认为默认行为是将页面滚动位置设置回页面顶部。 您的页面中还有其他东西可能会覆盖此行为吗？

例如：

1. 您的DataList是否在UpdatePanel中？ 在这种情况下，当前滚动位置将在（部分）回退后保持不变。 因此，您需要自己将滚动位置重置到页面顶部。 一种实现方法是为PageRequestManager的EndRequest客户端事件实现一个处理程序，该处理程序将设置滚动位置-该线程说明了
2. 页面MaintenanceScrollPositionOnPostBack属性是否设置为true？

Answer 2

您可以尝试在页面顶部设置命名锚。 这是一篇说明它的文章http://www.w3schools.com/HTML/html_links.asp

Answer 3

在进行AJAX部分回发之后，您可能需要返回到ASPX页面的顶部以显示错误消息等。这是我完成此操作的一种方法。 您可以将下面的JavaScript函数添加到ASPX页面，然后在需要的时候通过使用ScriptManager.RegisterClientScriptBlock方法在代码隐藏中调用该方法。 ASP.NET C＃代码背后：

ScriptManager.RegisterClientScriptBlock(this, Page.GetType(), 
 "ToTheTop", "ToTopOfPage();", true);

JavaScript的：

<script type="text/javascript">
function ToTopOfPage(sender, args) {
    setTimeout("window.scrollTo(0, 0)", 0);
}

您还可以使用按钮的OnClientClick属性将JavaScript滚动到页面顶部。 但是，这将导致这种现象在每次单击按钮时发生，而不仅仅是在您希望它发生时发生。 例如： <asp:Button id="bntTest" runat="server" Text="Test" OnClick="btn_Test" OnClientClick="javascript:window.scrollTo(0,0);" /> <asp:Button id="bntTest" runat="server" Text="Test" OnClick="btn_Test" OnClientClick="javascript:window.scrollTo(0,0);" />

Answer 4

<asp:LinkButton ID="lbGonder" runat="server" CssClass="IK-get" ValidationGroup="ik" OnClick="lbGonder_Click" OnClientClick="ddd();" title="Gönder">Gönder</asp:LinkButton>`
<script type="text/javascript">
var ddd = (function () {
    $('body,html').animate({
        scrollTop: 300
    }, 1453);
    return false;
});