How to scroll page to the bottom of the page upon clicking button?

Question

i want to scroll down my page to bottom when i click specifix button,

e.g after clicking 'btn' a gridview appears but user has to scroll down to see the gridview but i want that it should move as soon as gridview appears

<asp:Button ID="btnSubscribe" runat="server" CssClass="btn btn-success" Width="35px"
                                    OnClick="btnSubscribe_Click" Text="+" />
<asp:GridView ID="GridViewResults" runat="server" Width="100%" AutoGenerateColumns="False"
                        OnRowDeleting="GridViewResults_RowDeleting" ShowFooter="True" DataMember="S.No"
                        OnRowDataBound="GridViewResults_RowDataBound" CssClass="table table-hover table-striped table-bordered">

                    </asp:GridView>

Note: this whole page and section appears in Update Panel

you'll have to write javascript. google how to do scroll the page in javascript and you will find an answer. — DLeh, Feb 24 '15 at 18:48
possible duplicate of [Scroll automatically to the bottom of the page](http://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page) — NightOwl888, Feb 24 '15 at 18:50

Hanlet Escaño · Answer 1 · 2015-02-24T20:10:29.060

You can accomplish this with JavaScript:

<input type="button" value="Click Me" onclick="document.getElementById('<%= myGridView.ClientID %>').scrollIntoView();" />

Given your GridView's name is myGridView. If you have a server-side control, you can create a JavaScript function and call it from the OnClientClick.

EDIT: If you have a UpdatePanel, you want to be able to execute the previous code when the UpdatePanel has Updated something. Try this:

<script>
        function focusGrid() {
            var gv = document.getElementById('<%= myGridView.ClientID %>');
            if(gv)
                gv.scrollIntoView();
        }

        onload = function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { focusGrid(); });
        }
    </script>

What this code does is to register a handler that executes after the UpdatePanel's request ends. Then the focusGrid function is called, and it will bring the GridView into focus if it is part of the DOM at this point.

OnClientClick won't work like that. You will need to add it OnLoad because OnClientClick does not understand server tags. That is why I said to create a function. — Hanlet Escaño, Feb 24 '15 at 19:40
Look at my update. Remove everything from before, and just add the JS code. No need to add anything to the button (so remove what you had from before). — Hanlet Escaño, Feb 24 '15 at 20:10

How to scroll page to the bottom of the page upon clicking button?

1 Answers1