記 · 滾動條滾動到指定位置(錨點)的不一樣實現方式

最近項目中遇到傳統的錨點問題。那什麼是錨點問題呢？

錨點 是網頁製做中超級連接的一種，又叫命名錨記。命名錨記像一個迅速定位器同樣是一種頁面內的超級連接，運用至關廣泛。而且能夠對網站內容經過菜單進行快速定位。

上圖所示爲錨點示意圖，那這種需求咱們怎麼實現呢？下面我就來提供一些在不一樣場景下，可使用的錨點方式。

1.first blood

在傳統開發過程當中，咱們的錨點都是經過a標籤跳轉至對應ID的形式進行需求實現的。

<a href="#content1">Menu1</a>
<a href="#content2">Menu2</a>

<div id="content1">Content1</div>
<div id="content2">Content2</div>

這是a標籤提供給咱們的錨點解決方式。

2.double kill

原生js去獲取並修改scrollTop

這種狀況，咱們通常用於固定頁面元素的錨點設置，或者設置返回頂部按鈕。

// 經過element.scrollTop來獲取當前元素滾動條高度
// 能夠在控制檯輸出下
document.documentElement.scrollTop  ====> number  
// 返回一個number類型的內容，是滾動條的高度


// 也能夠經過給scrollTop賦值去設置滾動條高度
// 在控制檯輸出
document.documentElement.scrollTop = 0
// 會發現已經滾動的滾動條，滾動到頁面最頂端。

在js的世界裏，瀏覽器的兼容性老是讓人那麼頭疼

Safari中使用的是 window.pageYOffset
IE中是 document.body.scrollTop 以及 document.documentElement.scrollTop；

因此考慮到瀏覽器兼容性問題，最後總結出一句完美兼容的代碼。

// 獲取滾動條高度兼容性寫法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

3.triple kill

Element​.scroll​Into​View()
這個方法在MDN上的解釋是實驗中的功能，可是親測主流瀏覽器是可用，而且出奇的好用。話很少說，直接上代碼。

// 將某個元素跳轉到瀏覽器視口的最上方
element.scrollIntoView()

語法:

// 等同於element.scrollIntoView(true) 
element.scrollIntoView();

// Boolean型參數
// true  元素的頂端將和其所在滾動區的可視區域的頂端對齊 ； false 元素的底端將和其所在滾動區的可視區域的底端對齊 
element.scrollIntoView(alignToTop); 

// 一個帶有選項的object：
// {
//     behavior: "auto"(默認)  | "instant" | "smooth"(緩動),
//     block:    "start" | "end",
// }
element.scrollIntoView(scrollIntoViewOptions); // Object型參數

4.quadra kill

目前來說基本的錨點功能已經實現了，點擊menu就會跳轉到對應的content

可是看起來仍是有些生硬。咻~ 的一下就過去了，因此加個緩動來提高下用戶體驗吧。

在你須要滾動的div的樣式裏面加一句。

scroll-behavior: smooth; // 滾動條緩慢滾動

5.penta kill

到此爲止，一個完整的錨點緩慢滾動就完成了，快去試試吧！！！