I have a div with a scroll bar. It contains various child divs, and when the user sees them, they are in vertical order. So he can scroll to whatever child div he wants to. Then he can click on an arrow, and the entire child div expands to reveal a lot of text.
This all works.
But I'd also like to make the child div scroll up to the top of the parent div. Otherwise, it could happen that the user clicks on a child div that is near the bottom of the screen, and it expands, but most of the content is below the screen, which means he has to use the browser's own scrollbar to see the rest.
I've not had a chance to try this for myself but I think it might be something like this:
var pos = $('#child_el').position();
var posx = pos.top;
position() returns the top (and left) position of an element within it's parent, which should be the (parent) div. scrollTop(value) will scroll the parent div so the child div is at the top (of the div).
However, if your parent div doesn't occupy the whole page then you may also have to consider scrolling the browser window. For example,
$(window).scrollTop(); // should scroll to the very top of the window.
although I've read that some browsers might need to use $(document) instead of $(window).
Actually, I suppose you could apply the technique I've described to also move the parent div to the top of the browser window (or up a bit)? But the effect would probably be messy.. Good luck, Andy.
Added: If (once) you get it scrolling to the right place you could consider animating the scroll (with animate()) for a smooth effect.
Leave a comment on andrewgsw's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic