CODEWITHSUNDEEP
jqueryscrolltop
user1108996
user1108996

Reputation: 285

JQuery animate scrollTop Not Working Properly

The following JQuery code scrolls the page to the first error in the form:

$('html,body').stop().delay(500).animate({scrollTop: $errors.filter(":first").offset().top -30},'slow');

However, if I replace the $('html,body') with the name of a container element such as a div class $('.myDivClass') with fixed positioning, it doesn't seem to work well. It just scrolls to random places up and down with each submission. If the container element is anything other than html,body, it doesn't seem to work right.

I can't figure out what I'm doing wrong.

The css of the container element looks like this (so you know what I mean):

.mcModalWrap1{
position:fixed;
top:0;
left:0;
width:100%;
padding:50px;
background-image:url(images/overlay.png);
overflow:auto;
z-index:999;
display:none;
}

I have tried using position() instead of offset() for relative positioning but it didn't make a difference.

Thank you!

Update: Looks like there is no solution for this.

Upvotes: 7

Views: 19886

Answers (5)

redlcamille
redlcamille

Reputation: 1

Please try to substitute this line of code to see if it behaves like what you want:

$('#container').stop().delay(500).animate({scrollTop: $errors.filter(":first").offset().top - $('#container').offset().top + $('#container').scrollTop()},'slow');

You can replace the part $errors.filter(":first").offset().top - $('#container').offset().top by $errors.filter(":first").position().top, I believe.

Upvotes: 0

mtkopone
mtkopone

Reputation: 6443

I know I'm super-late to the party, but ran into the same issue, and here's how I fixed it.

When scrolling inside a fixed-positioned element, for some reason you have to add it's own scrollTop to the position to which you want to scroll, so:

var position = $errors.filter(":first").position().top + $('. myDivClass').scrollTop()
$('.myDivClass').animate({ scrollTop: position })

Worked for me.

Upvotes: 14

coorasse
coorasse

Reputation: 5538

I had the same problem. It works only on first call.

To fix this you need to scroll to the top everytime before calling animate().

So I changed my:

$(element).animate({scrollTop: 500});

with

$(element).scrollTop(0);
$(element).animate({scrollTop: 500});

Yes, it's true, everytime it scrolls to the top first, but without animation and works quite well for me.

Hope it helps.

Upvotes: 4

user1108996
user1108996

Reputation: 285

Solved the problem by dumping the idea. JQuery scrollTop does not work in parent container other than html,body to scroll to a particular position. It only works to scroll to top or bottom. Neither position() nor offset() calculates the value properly.

If someone has an answer, I'd love to know.

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39902

If you are scrolling something other than the window then you need to find the error's position relative to its container. In this case a div. If the element is in the div then use position instead which will be in reference to the first parent with relative, fixed or absolute positioning. 

$('.mcModalWrap1')
     .stop()
     .delay(500)
     .animate({scrollTop: $errors.filter(":first").position().top -30},'slow');

Upvotes: 1

Related Questions