1. 程式人生 > >jQuery滾動到頁面指定位置

jQuery滾動到頁面指定位置

        在前端的頁面開發中,經常會碰到頁面跳轉問題,這個跳轉指的是頁面內部跳轉到指定位置,通常是在有滾動條的情況下,網上介紹的方法很多,本文主要是介紹jQuery函式中的一個小trick,.focus()函式。

        先來看一下jQuery的官方文件:

image

image

        上面的文件扯了一堆,半點沒看到頁面跳轉的影子,但是在實際應用中你會發現,如果一個控制元件呼叫了.focus()方法,頁面會自動跳轉到控制元件所在位置。

        舉例說明:

image

        如圖,這是一個pop up,modal,如果你選中了某一條資料,你想再開啟這個pop up時頁面直接跳轉到選中的這條資料的位置,用.focus()可以這麼寫:

$('input[name=test]:checked').focus();

test是一堆radio的name,:checked代表查詢被選中的那個radio,focus()方法會直接將頁面跳轉到被選中的這條資料的位置。

注:focus方法使用有個前提,那就是控制元件不能是disabled,如果控制元件要設為disabled,那要在控制元件被disabled之前呼叫focus方法。

感謝教我這個小trick的Lucas!