問題重現
原始頁面：頁面中有header、main、footer三部分，其中 header 和 footer 通過 position: fixed; 定位在瀏覽器頂部和底部。
其中，footer 中有一個input 輸入框。
點擊 input 框使之獲取焦點，喚起虛擬鍵盤，正常頁面效果如下：
注：在ios系統喚起軟鍵盤，鍵盤和底部輸入框之間有一塊空白間距。
但是偶爾會出現軟鍵盤擋住input框的情況，如下：
針對此問題，目前沒有十分有效的方法，只能通過js調整input輸入框的位置，使之出現在正常的位置。
解決方法
scrollIntoView(alignWithTop): 滾動瀏覽器窗口或容器元素，以便在當前視窗的可見范圍看見當前元素。
alignWithTop 若為 true，或者什么都不傳，那么窗口滾動之后會讓調用元素的頂部與視口頂部盡可能平齊；
alignWithTop 若為 false，調用元素會盡可能全部出現在視口中，可能的話，調用元素的底部會與視口頂部平齊，不過頂部不一定平齊。
支持的瀏覽器：IE、Chrome、Firefox、Safari和Opera。
該方法是唯一一個所有瀏覽器都支持的方法，類似還有如下方法，但是只有在Chrome和Safari有效：
scrollIntoViewIfNeeded(alignCenter)
scrollByLines(LineCount)
代碼如下：(使用setTimeout注意修改this值)
再次測試，效果如下：
相比於input被擋住，突兀地出現在頁面中間更加可以令人接受
針對input輸入框被虛擬鍵盤擋住的問題，還有一個類似的解決方案：
當軟鍵盤被喚起是，使用 scrollTop() 方法使input元素滾動到指定的位置，但是滾動的具體數值需要調試才能給出，所以這里就不再演示了。