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

Question

I've a asp.net datagrid which shows customer order details. Pagination at the bottom of the grid is done using datalist and asp.net Linkbutton controls. Here is the code:

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

When the user clicks on any page number(ie.Link button), I need to set focus on top of the page.

How do i do this?

Thanks!

Answer 1

I think the default behaviour would be for the page scroll position to be set back to the top of the page. Is there anything else in your page that might be overriding this behaviour?

For example:

1. Is your DataList inside an UpdatePanel? In that case the current scroll position will be maintained over a (partial) post-back. You would therefore need to reset the scroll position to the top of the page yourself. One way to do this would be to implement a handler for the PageRequestManager's EndRequest client-side event which would set the scroll position - this thread explains how
2. Is the Page MaintainScrollPositionOnPostBack property set to true?

Answer 2

You could try setting a named anchor at the top of the page. Here is an article that explains it http://www.w3schools.com/HTML/html_links.asp

Answer 3

After an AJAX partial postback you may need to return to the top of your ASPX page to display an error message, etc. Here is one way that I have done it. You can add the JavaScript function below to your ASPX page and then call the method when needed in your code-behind by using the ScriptManager.RegisterClientScriptBlock method. ASP.NET C# Code-behind:

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

JavaScript:

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

You can also just JavaScript to scroll to the top of the page by using the OnClientClick property of your button. But this will cause this behavior to occur every time the button is clicked and not just when you want it to happen. For example: <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;
});