动画滚动/使用jQuery显示隐藏元素

Question

There are several questions around similar to this and I have tried all suggestions, to no avail.

I have a text area and a button. The button is initially hidden, but when the user types anything the button is shown.

In addition to this I want to scroll the page so that the button becomes visible. Example:

$(document).ready(function () {

    $('#AddCommentEntryBox').on('keyup', function (e) {
        if ($(this).val() !== '') {
            $('#AddCommentButton').show();
            $(window).scrollTop($('#AddCommentButton').position().bottom);
            //$("html, body").animate({ scrollTop: $(document).height() }, 1000);
        } else {
            $('#AddCommentButton').hide();
        }
    });
});

http://jsfiddle.net/sJQcM/

EDIT: better example - I need to scroll a parent element, not the page:

http://jsfiddle.net/sJQcM/3/

Answer 1

$(document).ready(function () {
    $('#AddCommentEntryBox').on('keyup', function (e) {
        if ($(this).val() !== '') {
            $('#AddCommentButton').show();
            $('html, body').stop().animate({scrollTop:$('#AddCommentButton').offset().top})
        } else {
            $('#AddCommentButton').hide();
        }
    });
});

FIDDLE

You may want to exclude the backspace from this.

Your example may have also worked, the reason it didn't is because .position() gives only .top or .left . Bottom is not given (you have to calculate it yourself).

You can also use .animate() with scrollTop for smooth scrolling. In addition I recommend you wait for the user to stop typing for a few seconds before scrolling, otherwise it will scroll down and the textarea will be only partially visible.