Как я могу расположить сфокусированный элемент в нижней части области просмотра, а не по центру?

Question

Когда я фокусирую текстовые поля, область просмотра центрирует сфокусированный элемент. Когда я сфокусирован, я бы хотел, чтобы текстовые поля располагались в нижней части области просмотра. Я пытался использовать scrollTop с jQuery, однако функция animate() со смещением создает эффект отскока перед выравниванием с текстовой областью. Другие предложили использовать return false; или e.preventDefault(); для устранения этого эффекта, но ни один из них не решил проблему. Как бы вы разместили эти поля в нижней части области просмотра, а не по центру?

$('textarea.outline').focus(function () {
  var top = $(this).offset().top + 173;
  var center = $(window).height();

  if (top > center) {
    $('html, body').animate({ scrollTop: top - center }, 'fast');   
  }
});