html頁面定位到指定位置的方法大全

最新接觸了一個項目需要實現定位提示頁面某個部分文本沒有輸入，請輸入。網上百度一波，發現有4種方法（也許可能更多）。特此記錄一下。

1 錨點法

  錨點法，就是利用href屬性，URL以#elementName的形式訪問某個name屬性爲elementName的節點。代碼如下。

// 其中的一種表現形式，其格式‘#name’固定不變。
<a href="#anchorName">點擊跳轉當前頁面指定錨點</a>

2 動畫滾動法

  動畫滾動法就是充分利用ScrollTop屬性的特性（被捲去的頁面高度），以動畫的形式實現。相關代碼如下：

// $(checkItem).offset().top表示$(checkItem)節點距離頂部組件的高度，1000表示動畫時間
 $('html , body').animate({scrollTop: $(checkItem).offset().top}, 1000);

3 scrollIntoView()

  官方文檔顯示這是一個實驗的方法，我的瀏覽器能成功實現。其代碼如下：

// 這裏使用了jquery選擇器，scrollIntoView()官方解釋說控件滾動到可見區域（一般是瀏覽器最頂端）。其先詳細用法參照官方文檔。
// 爲什麼需要添加[0]呢，scrollIntoView()是js方法，然而$("#cao")是jquery對象，是DOM集合。
$("#cao")[0].scrollIntoView();

4 scrollTo(Top,left,behavior)

  top表示到頂部的距離，left表示到左邊的距離，behavior表示行爲默認smooth。相關代碼如下：

window.scrollTo({
	top: $('#cao').offset().top,
	behavior: 'smooth'
});