Question

When the user clicks a certain button at the bottom of the site I am working on, it expands into a comment form. If there is a lot of other content on the page, the comment form will expand below the fold and the user might not notice that it has appeared.

I would like to scroll the page down as the comment form expands to draw the user’s attention to it. I looked at this question, but the solution doesn’t work because my form animates as it expands, so the scrolling stops with only the top of the form visible. Also, jumping around looks ugly.

Here is my current code.

$("#show").click(function() {
    if (!$("#change-form").is(":visible")) {
        $("#change-form").show("blind",{},500);
        $(document).animate({scrollTop: $(document).height()}, 1000);
    }
    return false;
});

The $(document).animate line is very similar to what I’ve found in the jQuery documentation, but the page doesn’t scroll at all. I’ve tested this in Chrome 5.0.375.125 and Firefox 3.6.8 with no success, although I’ve read that $(document) is supposed to work in both browsers. Why won’t the page scroll?

Answer 1

Have you tried scrollTo? http://plugins.jquery.com/project/ScrollTo