vue實現錨點跳轉之scrollIntoView()方法

滾動到某個特定元素 ：scrollIntoView()；這個方法不用獲取右邊小標題的高度，啥都不用，有id或者class就行啦，幾乎可以滿足你錨點跳轉的所有需求，對齊方式，以及平滑滾動了

這裏是v-for循環出來需要點擊跳轉到對應div的事件

<p> v-for="(value,index) in data" @click="scrollToPosition(index)">{{...}}</p>  

這就是你點擊scrollToPosition事件需要滾動對應的div

<div> v-for="(value,index) in data" class="roll">{{...}}</div>  

js部分

methods:{
  scrollToPosition(index){
     document.getElementsByClassName('roll')[index].scrollIntoView()
}
這樣就利用scrollIntoView()簡單實現了一個錨點跳轉,下邊來看一個scrollIntoView中的一些屬性

• scrollIntoView(true)相等於scrollIntoView();元素的頂端將和其所在滾動區的可視區域的頂端對齊
  爲true時相應的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。這是這個參數的默認值。
• scrollIntoView(false)元素的底端將和其所在滾動區的可視區域的底端對齊
  爲false時相應的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

同時他的參數也可以是一個object對象

  scrollIntoView({
  behavior：auto //定義動畫過渡效果"auto"或 "smooth" 之一。默認爲 "auto"。
  block：start//定義垂直方向的對齊， "start", "center", "end", 或 "nearest"之一。默認爲 "start"。
  inline:nearest//"start", "center", "end", 或 "nearest"之一。默認爲 "nearest"。
  })

其中smooth是平滑滾動 start和end是目標滾動到的位置

注意：兼容性的問題多數主流瀏覽器已經支持其基本功能，也就是說，使用true，false兩個參數，來實現木訥的定位（沒有滾動動畫）是沒有任何問題的，但是傳入object參數時，就不得不說一句，IE各種版本會直接忽略，全部看成true參數屬性，如果想看到滾動動畫，就只有火狐和chrome