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

FIDDLE

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

您的示例可能也有效，其原因不是因为.position()仅提供.top或.left。底部没有给出（你必须自己计算）。

您还可以使用.animate()和scrollTop进行平滑滚动。另外我建议你等待用户在滚动前停止输入几秒钟，否则它会向下滚动，textarea只会部分可见。

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

1 个答案: