How to scroll to top of a div using jQuery?

JqueryHtmlScrollScrolltop

Jquery Problem Overview


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 link buttons in it... I will scroll to top of the div from the bottom of 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 achieve that...

Jquery Solutions


Solution 1 - Jquery

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');
});

Solution 2 - Jquery

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

setTimeout(function(){ 

$('#DIV_ID').scrollTop(0);

}, 500);

Solution 3 - Jquery

You could just use:

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

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

Solution 4 - Jquery

Special thanks to Stoic for

   $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top});

Solution 5 - Jquery

This is my solution to scroll to the top on a button click.

$(".btn").click(function () {
if ($(this).text() == "Show options") {
$(".tabs").animate(
  {
    scrollTop: $(window).scrollTop(0)
  },
  "slow"
 );
 }
});

Solution 6 - Jquery

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.

Solution 7 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionACPView Question on Stackoverflow
Solution 1 - JqueryGreg MathewsView Answer on Stackoverflow
Solution 2 - JqueryM.BushView Answer on Stackoverflow
Solution 3 - JqueryAtes GoralView Answer on Stackoverflow
Solution 4 - JqueryRationalRabbitView Answer on Stackoverflow
Solution 5 - JqueryIpsitaView Answer on Stackoverflow
Solution 6 - JqueryLondon SmithView Answer on Stackoverflow
Solution 7 - JqueryShoaib QuraishiView Answer on Stackoverflow