在編寫用戶登錄頁面時，如果頁面上有多個組件的話，有一個常見的需求就是當鍵盤彈起時，讓整個頁面內容上移，避免被鍵盤遮擋，影響用戶的體驗。這篇文章就來簡單介紹一下如何實現這一功能。

$(function () {
$('input').on('focus', function () {
var target = $(this).offset().top - 60;
$('html,body').animate({scrollTop: target}, 500);
});
});

如上述代碼所示，主要是通過JS/jQuery實現，在輸入框獲得焦點時，計算出相對于頁面頂部的距離target值，然后通過jQuery的animate函數實現整個頁面向上滾動到target位置的動畫效果，使得輸入框位于頁面中央，避免被鍵盤遮擋。

當然，對于不同的頁面結構、樣式，這段代碼可能需要做一些微調，但是整體的實現思路是相通的。