Home » Html » How to scroll to top of a div using jquery?

How to scroll to top of a div using jquery?

Posted by: admin November 30, 2017 Leave a comment

Questions:

I have a gridview inside a div… I want to scroll to top of the div from the bottom of the div using jquery… Any suggestion….

<div id="GridDiv">
// gridview inside...
</div>

My gridview will have custom pagination generated linkbuttons in it… I will scroll to top of the div from the bottom on the link button click …

protected void Nav_OnClick(object sender, CommandEventArgs e)
    {
        LinkButton lb1 = (LinkButton)sender;
        //string s = lb1.ID;
        ScriptManager.RegisterClientScriptBlock(lb1, typeof(LinkButton), 
 "scroll", "javascript:document.getElementById('GridDiv').scrollTop = 0;", true);

In the place of javascript i ll call the jquery function… Any suggestion…

EDIT:

Exactly like Stackoverflow questions per user page… When changing page nos it scrolls to top with smooth effect…. I want to acheive that…

Answers:

You could just use:

<div id="GridDiv">
// gridview inside...
</div>

<a href="#GridDiv">Scroll to top</a>

Questions:
Answers:

Here is what you can do using jquery:

$('#A_ID').click(function (e) { //#A_ID is an example. Use the id of your Anchor
    $('html, body').animate({
        scrollTop: $('#DIV_ID').offset().top - 20 //#DIV_ID is an example. Use the id of your destination on the page
    }, 'slow');
});

Questions:
Answers:

Or, for less code, inside your click you place:

setTimeout(function )( { $('#DIV_ID').scrollTop(0); }, 500);

Questions:
Answers:

I don’t know why but you have to add a setTimeout with at least for me 200ms:

setTimeout( function() {$("#DIV_ID").scrollTop(0)}, 200 );

Tested with Firefox / Chrome / Edge.

Questions:
Answers:

Use the following function

window.scrollTo(xpos, ypos)

Here xpos is Required. The coordinate to scroll to, along the x-axis (horizontal), in pixels

ypos is also Required. The coordinate to scroll to, along the y-axis (vertical), in pixels