I know a variation on this has been asked several times; I've been browsing SO for a while now but either I'm doing something wrong or I haven't found what I need.
I have a structure of nested comments, pretty much the same as the Facebook Comments plugin, and whenever reply is clicked, a small form with textarea and a button appear at the bottom of the comments.
Again, the behaviour is the same as the Facebook Comments plugin and I want to achieve the same when it comes to scrolling the newly add textarea into view.
I've tried the scrollTo plugin, and it works smoothly but, even if I manually scroll to the very bottom of the page, the scroll animation will always reset the scroll position and begin from the top.
For the record, this is how I'm calling scrollTo:
$.scrollTo($('#addReply_1'), 800);where addReply_1 is the div containing the form. I've stried scrolling to the form itself and to the textarea. Same results.
Is there a way to scroll to an element only if its not already visible?
I've tried many solutions offered on SO, like Scroll to an element using jQuery, but none seem to behave as desired; even Scroll to a particular element w/ jQuery or Check if element is visible after scrolling displays the same "jumpy" behaviour.
UPDATE: Online demo to show behaviour
I've uploaded an html demo page that shows the behaviour I'm complaining about: http://www.wouldbebetter.com/demo/comment-demo.htm
Just scroll to the bottom of the page and click any of the Reply links to see the "jumpy" scrolling I'm referring to.
Note that this demo uses the scrollintoview plugin of @Robert Koritnik's answer, but the behaviour is the same if I use, for instance, ScrollTo.