滾動條滾動到指定位置(錨點)的不同實現方式

一、在傳統開發過程中，我們的錨點都是 通過a標簽跳轉至對應ID的形式 進行需求實現的。

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

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

 

二、還可以用 原生js去獲取並修改scrollTop

這種情況，我們一般用於固定頁面元素的錨點設置，或者設置返回頂部按鈕。

❤️ 若vue + elementUI ，可用 Backtop組件回到頂部

 

   // 通過element.scrollTop來獲取當前元素滾動條高度

    document.documentElement.scrollTop  ====> number  
    // 返回一個number類型的內容，是滾動條的高度
    
    
    // 也可以通過給scrollTop賦值去設置滾動條高度
    // 在控制台輸出
    document.documentElement.scrollTop = 0
    // 會發現已經滾動的滾動條，滾動到頁面最頂端。

瀏覽器的兼容性總是讓人那么頭疼

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

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

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

 

三、 Element​.scroll​Into​View() 這個方法在MDN上的解釋是實驗中的功能，但是親測主流瀏覽器是可用，並且出奇的好用。

 

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

 

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

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

 

四 、優化：加個緩動來提升下用戶體驗

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