How to scroll to top of a div using jQuery?

Question

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

Perhaps I'm misunderstanding but why don't you just use page anchors? — Spencer Ruport, Mar 03 '10 at 06:02

score 193 · Answer 1 · edited Sep 18 '17 at 23:15

193

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

edited Sep 18 '17 at 23:15

JGallardo

11,074
10
82
96

answered Jan 11 '12 at 00:30

Greg Mathews

1,993
1
11
7

5

@citress The hard coded value is so that the top of the div is not at the very top of the browser window, purely for aesthetics. (Should probably leave it out) – Greg Mathews Aug 04 '14 at 21:53
1

@GregMathews "Should probably leave it out", yet every time I've done this, I have had to add the offset to ensure it is a working, professional execution. +1 just for including the offset. – Parapluie Jan 30 '19 at 20:28

score 66 · Answer 2 · edited May 03 '18 at 07:08

66

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

setTimeout(function(){ 

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

}, 500);

edited May 03 '18 at 07:08

user1063287

10,265
25
122
218

answered Sep 22 '15 at 16:08

M.Bush

1,102
1
12
22

This doesn't work in jQuery 2.2.0. But the answer with 116 votes does. – Nostalg.io Jan 12 '17 at 19:13
1

You have to add a `setTimeout` to make it work: `setTimeout(function )( { $('#DIV_ID').scrollTop(0); }, 500);` – London Smith Feb 11 '17 at 12:57
Thanks London, I'll edit then, seems like things have changed – M.Bush Mar 27 '17 at 23:51
5

The syntax is incorrect. It should be: `setTimeout(function() { $('#DIV_ID').scrollTop(0); }, 500);` – Dshiz Jun 14 '17 at 08:46

score 5 · Answer 3 · answered Apr 23 '19 at 04:24

5

Special thanks to Stoic for

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

answered Apr 23 '19 at 04:24

RationalRabbit

1,037
13
20

Ates Goral · Accepted Answer · 2013-01-09T15:21:38.427

3

You could just use:

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

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

edited Jan 09 '13 at 15:21

answered Mar 03 '10 at 06:03

Ates Goral

137,716
26
137
190

6

You don't need the anchors. Just go to #GridDiv. – Mar 03 '10 at 06:31
54

+1 for a technically brilliant solution to the problem of the user... but completely useless to anyone looking for an answer to the actual question. (Anchors does NOT solve my issue, I need to scroll the screen to the top of a div using javascript! -- Complaining because this was top google result for me) – RonLugge Jan 20 '13 at 02:50
@RonLugge In that case, Greg Mathews' answer could help. Try setting or animating the `scrollTop` property. – Ates Goral Jan 20 '13 at 16:22
@AtesGoral Yeah, I wound up doing that -- and he's getting the upvote for it (though I don't like that type of 'cramped' code style). It just amuses and annoys me that the 'top answer' doesn't answer the actual question. – RonLugge Jan 20 '13 at 21:37
@RonLugge I'm with you on the "cramped" bit. So I edited his answer to add some white space. – Ates Goral Apr 20 '15 at 15:41
There goes 20 lines of JavaScript. How have I never heard of this? – JackHasaKeyboard May 26 '16 at 20:27
Doesn't answer the question, this doesn't 'scroll to' an element, it directly anchors to it. – Nathan Hornby Apr 12 '17 at 12:32
@NathanHornby Can you elaborate? What else does clicking an anchor to an element do? – Ates Goral Apr 13 '17 at 15:26
@Ates Goral It takes you directly to it. There is no 'scrolling' involved. (It's a semantics discussion, but in this case a relevant one) – Nathan Hornby Apr 14 '17 at 12:06
@NathanHornby Oh, I see. The OP has even edited the question to add "scrolls to top with smooth effect". In that case, yeah, this minimal solution wouldn't help with that. – Ates Goral Apr 14 '17 at 15:55

score 2 · Answer 5 · answered Apr 29 '20 at 05:51

2

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

answered Apr 29 '20 at 05:51

Ipsita

111
2
5

score 1 · Answer 6 · answered Feb 11 '17 at 12:59

1

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.

answered Feb 11 '17 at 12:59

London Smith

1,622
2
18
39

score 0 · Answer 7 · answered Sep 06 '17 at 11:53

0

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

answered Sep 06 '17 at 11:53

Shoaib Quraishi

232
2
17

This will scroll the whole window. User needed to scroll just an element, in this case a `
`.
– Máster May 14 '18 at 19:27

How to scroll to top of a div using jQuery?

7 Answers7

Linked