How to scroll to top of a div using jQuery?
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...
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');
});
Or, for less code, inside your click you place:
setTimeout(function(){
$('#DIV_ID').scrollTop(0);
}, 500);
You could just use:
<div id="GridDiv">
// gridview inside...
</div>
<a href="#GridDiv">Scroll to top</a>