append content, scroll to it, and then hide old content

append content, scroll to it, and then hide old content

I have several div content container. What I would like to have is the following jquery effect;

you click on a link, the content of the div container associated with the link is appended to the current content. Then, the page scrolls to the new content and the old content disappears.

That means, when manually scrolling, you can only see the current div container but not the others. However, when clicking on a link to see new content, you see a smooth scrolling down animation to this content and the old content scrolls out (and is then gone – you cannot simply scroll back to it).

I played around with scrollTo, hide, show and append. That kind of works, but the problem is; when I append content, then scroll to it (with scrollTo) and then hide the old content, everything is shifted upwards. (Then I started with saving scroll positions but that seems like a bad hack/workaround and is probably very unreliable ...)

Does someone have an idea how to achieve this or can point me to a jquery plugin that already implements that?

There are jquery scroll plugins that look beautiful but nothing I found let the old content disappear smoothly after clicking on a link (instead effects happen while scrolling which is not what I am looking for).

May thanks for any help!