Добавить смещение в позицию jquery с помощью функции .scroll() & .find (selector) в DOM

Question

Я использую следующий код для прокрутки (после нажатия кнопки) в текстовом поле в DOM и фокусировки курсора. Он работает нормально.

$(document).on('click', '.test-comment', function() { 
    if (obj_test.u != '0') { 
     var commentsform = $(this); 
     if (!commentsform.hasClass('disabled')) { 
      commentsform.addClass('disabled'); 
     } else { 
      commentsform.removeClass('disabled'); 
     } 

     $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).scroll(function() { 
      if ($('#post-masonry #masonry').length) { 
       $('#post-masonry #masonry').masonry('reloadItems').masonry('layout'); 
      } else if ($('#masonry').length) { 
       $('#masonry').masonry('reloadItems').masonry('layout'); 
      } 
     }).find('textarea').focus(); 

     return false; 
    } else { 
    // do something 

     return false; 
    } 
}); 

.

НО это выглядит следующим образом. Как вы можете видеть, текстовое поле разрезается в нижней части окна моего рабочего стола.

Есть ли способ установить смещение (например, 100px) в мой код, чтобы прокрутить дальше? Таким образом, это выглядит следующим образом и сохраняет функцию фокуса? Или любая другая идея?

Answer 1

Вы можете вычислить право прокрутки сверху, сначала получает верхнюю часть текстового поля с помощью offset().top, а затем добавить в этом, высота текстового поля (так что все это прокручивается в виду) и некоторые дополнительное расстояние (например, 30), если вам нужно также включить кнопку под ним.

$(document).on('click', '.test-comment', function() { 
if (obj_test.u != '0') { 
    var commentsform = $(this); 
    if (!commentsform.hasClass('disabled')) { 
     commentsform.addClass('disabled'); 
    } else { 
     commentsform.removeClass('disabled'); 
    } 

    $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).scroll(function() { 
     if ($('#post-masonry #masonry').length) { 
      $('#post-masonry #masonry').masonry('reloadItems').masonry('layout'); 
     } else if ($('#masonry').length) { 
      $('#masonry').masonry('reloadItems').masonry('layout'); 
     } 
    });// 

    // HERE COMES YOUR SCROLLING CODE 
    var $targetTextArea = $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).find('textarea'); 
    var textAreaTop = $targetTextArea.offset().top; 
    var textAreaHeight = $targetTextArea.height(); 
    var scrollHeight = textAreaTop + textAreaHeight + 30; // added 30 to also include the submit button below the text area 
    $("html, body").animate({"scrollTop": scrollHeight}, 500, function(){ 
     $targetTextArea.focus(); 
    });//animate() 




    return false; 
} else { 
// do something 

    return false; 
} 

});