Using scrollTop inside of a fixed element with overflow-y:scroll

Question

I can't seem to get scrolltop to work when my content is inside of a fixed position container that has overflow-y: scroll specified.

Here is my relevant code:

/* some container with many large content blocks inside */
#container {
    position: fixed;
    width: 300px;
    height: 300px;
    overflow-y: scroll;
}

/* button that has a data-path attribute that specifies where the container should scroll to*/
$(".button").on("click", function(){
    var path = $(this).attr("data-path");
    var anchor = $("#" + path);
    var position = anchor.position().top;
    $("#container").animate({scrollTop: position});
});

I believe this fiddle illustrates my dilemma quite well: http://jsfiddle.net/Qndu5/

If you scroll from the top down to an element, it works great. After that, all bets are off. It is completely incapable of scrolling from any position other than the top. It either horribly misses the mark, or scrolls all the way back to the top, even though the position values being fed to it are seemingly correct.

Surely I'm missing something here, but I'm not sure what I am not understanding. Thanks for any help provided!

Morten Olsen · Accepted Answer · 2014-04-17 22:14:13Z

17

What you are missing is the scrollTop when calculating the position, so if the view is already scrolled, that need to be added to the calculation var position = anchor.position().top + $("#container").scrollTop();

http://jsfiddle.net/x36Rm/

answered Apr 17, 2014 at 22:14

Morten Olsen

1,86614 silver badges20 bronze badges

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

4 Comments

addMitt Over a year ago

Perfect! I was not understanding that scrollTop expects the absolute position and not the relative one. I was using position() for fear of scrollTop not returning correct values for my elements within the overflowing fixed container. I'm glad the solution was so brief. Thanks for the help.

xuanhung2401 Over a year ago

Perfect answer, you saved my day!

Edward Over a year ago

is there a way to do this without the animation?

Morten Olsen Over a year ago

Late answer but for future reference just replace $("#container").animate({scrollTop: position}); with $("#container").scrollTop(position); if I remember my jQuery correct

Collectives™ on Stack Overflow

Using scrollTop inside of a fixed element with overflow-y:scroll

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related