Анимированный прокрутка/показать скрытый элемент с помощью 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/

EDIT: лучший пример - мне нужно прокрутить родительский элемент, а не страницы:

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

Вы можете хотите исключить backspace f это.

Возможно, ваш пример также сработал, причина этого не в том, что .position() дает только .top или .left. Нижняя часть не указана (вы должны сами ее вычислить).

Вы также можете использовать .animate() с scrollTop для плавной прокрутки. Кроме того, я рекомендую вам дождаться, когда пользователь перестанет печатать на несколько секунд перед прокруткой, иначе он будет прокручиваться вниз, а textarea будет отображаться только частично.