jQuery scrollTop doesn't scroll

Question

I'm having troubles trying scroll automatically with javascript. My scrolling area is the body, my js code is

$("body").animate({scrollTop: $("#myDiv").position().top)

but I don't get any result: no animation and no scrolling I also tried

$("body").scrollTop($("#myDiv").position().top);

and also replacing

$("body") with $(window).

Any hint?

A quick note to add to this: unlike CSS properties, scrollTop() will not work if units are specified. scrollTop(10) is fine, scrollTop('10') is also ok, but scrollTop('10px') will fail. — adelphus
– adelphus, Commented Feb 27, 2015 at 15:33

Matt · Accepted Answer · 2012-05-04 14:08:09Z

3

scrollTop is a jQuery method which gets or sets the the offset of the current elements scroll bar, but with no animation.

You might be getting confused with the jQuery plugin scrollTo, which offers the functionality you're after.

You'd use it like;

$(window).scrollTo($('#myDiv');

answered May 4, 2012 at 14:08

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stefano Cazzola Over a year ago

Yes, I've yet tried out the scrollTo plugin, but with no luck. In this case the code I used is equals to your suggestion.

Matt Over a year ago

with no luck is not very helpful. It does work, I assure you. Maybe you can provide a code snippet showing it not-working, or explaining in more detail why it isn't meeting your needs?

Stefano Cazzola Over a year ago

sorry... I continue hittin "enter" and posting Here is the code snippet: $.ajax({ type : "GET", url : projectServiceUrl + "/fetchById", data : { projectId : $(node).attr("vision-id") }, dataType : "json", success : function(result) { $(node).addClass("enlarged"); $(node).css("width", ""); enlarge(result, node); $("#visions").isotope("reLayout", function(){ var st = $(node).offset().top; $(window).scrollTo($(node)); }); } });

Matt Over a year ago

@stefano: works for me jsfiddle.net/Hfymd. Or even jsfiddle.net/Hfymd/1

Stefano Cazzola Over a year ago

D'OH! I am sorry, I found out: There was a problem in the CSS. I left a "overflow: hidden" int html element. I removed it and now everything works fine. many thanks for your help and your time! Stefano

Taha Paksu · Accepted Answer · 2012-05-04 14:11:58Z

1

scrollTop is a javascript attribute and you can use it like :

document.body.scrollTop = scrollValue;

or

$("body").get(0).scrollTop = scrollValue;

and there's a plugin named jQuery ScrollTo written by Ariel Flesler if you want to animate the scrolling:

http://demos.flesler.com/jquery/scrollTo/

answered May 4, 2012 at 14:11

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

Comments

Kishan_KP · Accepted Answer · 2013-08-30 05:51:58Z

1

Try following code,

$('html,body').animate({scrollTop: $("#myDiv").offset().top},500);

edited Aug 30, 2013 at 5:51

Kishan_KP

4,5186 gold badges29 silver badges46 bronze badges

answered Aug 30, 2013 at 5:33

user2731681

111 bronze badge

Comments

Dtipson · Accepted Answer · 2014-09-15 17:52:53Z

0

Note: if you have chrome://flags/#enable-experimental-web-platform-features enabled, the plugin listed above won't work. It's a known issue: https://github.com/flesler/jquery.scrollTo/issues/92

answered Sep 15, 2014 at 17:52

Dtipson

1,60217 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery scrollTop doesn't scroll

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related