綜述

錨點定位是一個再熟悉不過的操作了，通常會用a標籤href=#XX去實現，不過這樣做，有一個問題，就是頁面會有重新整理感，而且位址列會有變化，F5重新整理，則#XXX還是顯示在位址列裡，這樣如果要進一步進行有關位址列url的操作，就不得不再做些判斷，所以尋找一些新的方法。

如果要求不是很高，scrollIntoView()這個方法就可以取代傳統錨點定位，它是利用滾動原理，來將相應的元素滾動到可是區域內。接下來看看詳細的介紹。

首先需要說明的是，這個方法並沒有寫入標準，但是大多數主流瀏覽器已經支援或部分支援其功能了，所以可以放心使用，當然如果有朝一日標準出來了，那就按標準來吧。

其次要說明的是，這是js原生方法，jquery等框架是使用不了的，所以，獲得元素的方法一定是document.getElementById或querySelector，然後才可以點出來scrollIntoView()方法。

官方引數

element.scrollIntoView(); // 等同於element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型引數 
element.scrollIntoView(scrollIntoViewOptions); // Object型引數

• 如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個引數的預設值。
• 如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。相應的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions 可選 

一個帶有選項的object：

{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}

behavior 可選

定義緩動動畫， "auto", "instant", 或 "smooth" 之一。預設為 "auto"。

block 可選

"start", "center", "end", 或 "nearest"之一。預設為 "center"。

inline 可選

"start", "center", "end", 或 "nearest"

使用介紹

看起來文鄒鄒，沒關係，下面就簡單明瞭的說明一下各種引數使用：

1.  頁面一定要能滾動，這個方法才會生效，否則，你讓我如何給你滾動呢？

2.  然後就看程式碼吧： 

//這個title-part元素將以平滑的滾動方式滾動到與視口底部齊平地方（有相容性問題）
document.querySelector("#title-part").scrollIntoView({
	block: 'end',
	behavior: 'smooth' 
})

//這個article-part元素將以平滑的滾動方式滾動到與視口頂部齊平地方（有相容性問題）
document.querySelector("#article-part").scrollIntoView({
	block: 'start',
	behavior: 'smooth'
})

//這個articleMU-part元素將木訥的瞬間滾動到與視口頂部齊平地方（無滾動動畫效果）
document.querySelector("#articleMU-part").scrollIntoView();//預設值就是true,可以不寫

//這個titleMU-part元素將木訥的瞬間滾動到與視口底部齊平地方（無滾動動畫效果）
document.querySelector("#titleMU-part").scrollIntoView(false)

3.  看了上面的程式碼，基本的用法就已經完全瞭解了，至於其他引數值，我沒有試過，不過好像也用不上，需要的就是滾動效果，並且有些瀏覽器也不支援，所以就不研究了，這裡還要說明的是，元素是否滾動到底部或頂部，還受制於頁面佈局的限制，如果頁面已經到頭，那相應元素也可能就停在半中腰的位置了；

4. 說完了使用，最後就是相容性了。前面已經提到了，這個方法沒有入標準，但是大多數主流瀏覽器已經支援其基本功能，也就是說，使用true，false兩個引數，來實現木訥的定位（沒有滾動動畫）是沒有任何問題的，但是加入options引數時，就不得不說一句，IE各種版本會直接忽略，全部看成true引數屬性，如果想看到滾動動畫，就只有火狐和chrome。最後附上官方的瀏覽器相容性圖表，結束文章，歡迎大家指正！不勝感激！

瀏覽器相容性

[1] 不支援 "smooth" 屬性 和 "center" 設定項.

[2] 設定項 "block" 及 "inline" 支援的值有："start", "center", "end", "nearest".

[3] 不支援 "inline" 設定項。

[4] 不支援"block" 設定項的值 "nearest" 或 "center"（參見 bug 1389274）。

目錄

綜述

官方引數

使用介紹