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

Question

有几个与此类似的问题，我尝试了所有建议，但无济于事。

我有一个文本区域和一个按钮。该按钮最初是隐藏的，但是当用户键入任何内容时，就会显示该按钮。

除此之外，我想滚动页面以使按钮可见。例子：

$(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/

编辑：更好的例子 - 我需要滚动父元素，而不是页面：

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();
        }
    });
});

小提琴

您可能希望从中排除退格键。

你的例子可能也有效，它没有的原因是因为.position()只给出.topor .left。底部没有给出（你必须自己计算）。

您还可以使用.animate()withscrollTop进行平滑滚动。此外，我建议您在滚动前等待用户停止输入几秒钟，否则它将向下滚动并且textarea仅部分可见。