hash實現錨點平滑滾動定位

時間 2019-11-18

標籤 hash 實現平滑滾動定位欄目系統網絡简体版

原文原文鏈接

1、科普時間

hashjavascript

hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）。
location.hash=anchorname。html

錨點java

錨點是網頁製做中超級連接的一種，又叫命名錨記。命名錨記像一個迅速定位器同樣，是一種頁面內的超級連接git

2、錨點簡單的栗子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>僞錨點</title>
    <style>
        .anchor1, .anchor2{width:100px;height:100px;margin-top:2000px;margin-bottom:2000px;}
        .anchor1{background:red;}
        .anchor2{background:green;}
    </style>
  </head>
  <body>
    <p>
      <a href="#anchor1">錨點1</a>
    </p>
    <p>
      <a href="#anchor2">錨點2</a>
    </p>
    <div id="anchor1" class="anchor1">
        錨點1
    </div>

    <div id="anchor2" class="anchor2">
        錨點2
    </div>
  </body>
</html>

解析
訪問該頁面的地址:http://127.0.0.1/anchor.html(我是在本地服務器上測試的)
點擊a連接錨點1，則頁面會直接跳到紅色的div(錨點1)，同時，瀏覽器地址改變爲http://127.0.0.1/anchor.html#anchor1
雖然能夠直接定位到制定的位置，可是效果不好，沒有平緩的過渡效果。github

3、改進過渡效果

1）前期理論準備
既然hash值是對應錨點的id值，那若是改成js動態獲取hash值，而後再根據hash值得到dom對象。最後，用js進行平緩過渡。
基於這個思路，就必需要求hash的取名有獨特性，不能跟頁面中的任何一個id一致，不然會觸發瀏覽器默認的錨點定位行爲。

2）肯定特殊hash命名
hash命名直接取特殊的前綴：w_，好比錨點1對應的hash值爲w_anchor1瀏覽器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>僞錨點</title>
    <style>
        .anchor1, .anchor2{width:100px;height:100px;}
        .anchor1{background:red;}
        .anchor2{background:green;}
        .spacing1, .spacing2{height:200px;}
        .spacing1{background:yellow;}
        .spacing2{background:gray;}
    </style>
  </head>
  <body>
    <p>
      <a href="#w_anchor1">錨點1</a>
    </p>
    <p>
      <a href="#w_anchor2">錨點2</a>
    </p>
    <p class="spacing1">間隔1</p>
    <p class="spacing2">間隔2</p>
    <p class="spacing1">間隔3</p>
    <p class="spacing2">間隔4</p>
    <p class="spacing1">間隔5</p>
    <p class="spacing2">間隔6</p>
    <p class="spacing1">間隔7</p>
    <p class="spacing2">間隔8</p>

    <div id="anchor1" class="anchor1">錨點1</div>

    <p class="spacing1">間隔1</p>
    <p class="spacing2">間隔2</p>
    <p class="spacing1">間隔3</p>
    <p class="spacing2">間隔4</p>
    <p class="spacing1">間隔5</p>
    <p class="spacing2">間隔6</p>
    <p class="spacing1">間隔7</p>
    <p class="spacing2">間隔8</p>

    <div id="anchor2" class="anchor2">錨點2</div>

    <p class="spacing1">間隔1</p>
    <p class="spacing2">間隔2</p>
    <p class="spacing1">間隔3</p>
    <p class="spacing2">間隔4</p>
    <p class="spacing1">間隔5</p>
    <p class="spacing2">間隔6</p>
    <p class="spacing1">間隔7</p>
    <p class="spacing2">間隔8</p>
  </body>
</html>

3）編寫讀取特殊hasn值的方法以及緩動方法(本示例不考慮兼容性)服務器

(function(window, undefined){
    // 監聽頁面加載完成後，檢查是否須要定位錨點
  window.onload = function(){
    scrollToAnchor();
  };

  // 監聽地址欄url的hash值改變時，檢查是否須要定位錨點
  window.onhashchange = function(){
    scrollToAnchor();
  };

  // 滾動到自定義的僞錨點
  function scrollToAnchor(){
    var hash = getHash(), // 獲取url的hash值
      anchor = getAnchor(hash), // 獲取僞錨點的id
      anchorDom, // 僞錨點dom對象
      anchorScrollTop; // 僞錨點距離頁面頂部的距離

    // 若是不存在僞錨點,則直接結束
    if(anchor.length < 1){
      return;
    }

    anchorDom = getDom(anchor);
    anchorScrollTop = anchorDom.offsetTop;

    animationToAnchor(document.body.scrollTop, anchorScrollTop);
  }

  /* 
    @function 滾動到指定位置方法
    @param startNum {int} -- 開始位置
    @param stopNum {int} -- 結束位置
  */
  function animationToAnchor(startNum, stopNum){
    var nowNum = startNum + 10; // 步進爲10

      if(nowNum > stopNum){
        nowNum = stopNum;
      }

      // 緩動方法
      window.requestAnimationFrame(function(){
        document.body.scrollTop = nowNum; // 當前示例頁面，滾動條在body，因此滾動body

        // 滾動到預約位置則結束
        if(nowNum == stopNum){
          return;
        }

        animationToAnchor(nowNum, stopNum); // 只要還符合緩動條件，則遞歸調用
      });
  }

  // 獲取錨點id
  function getAnchor(str){
    return checkAnchor(str) ? str.split("w_")[1] : "";
  }

  // 判斷是否爲特殊的hash值，也便是否爲僞錨點
  function checkAnchor(str){
    return str.indexOf("w_") == 0 ? true : false;
  }

  // 獲取hash值
  function getHash(){
    return window.location.hash.substring(1);
  }

  // 獲取dom對象
  function getDom(id){
    return document.getElementById(id);
  }
})(window);

****

在線演示:https://wall-wxk.github.io/blogDemo/anchor/anchor.htmldom

最後，附上完整示例源碼測試

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>僞錨點</title>
    <style>
        .anchor1, .anchor2{width:100px;height:100px;}
        .anchor1{background:red;}
        .anchor2{background:green;}
        .spacing1, .spacing2{height:200px;}
        .spacing1{background:yellow;}
        .spacing2{background:gray;}
    </style>
  </head>
  <body>
    <p>
      <a href="#w_anchor1">錨點1</a>
    </p>
    <p>
      <a href="#w_anchor2">錨點2</a>
    </p>
    <p class="spacing1">間隔1</p>
    <p class="spacing2">間隔2</p>
    <p class="spacing1">間隔3</p>
    <p class="spacing2">間隔4</p>
    <p class="spacing1">間隔5</p>
    <p class="spacing2">間隔6</p>
    <p class="spacing1">間隔7</p>
    <p class="spacing2">間隔8</p>

    <div id="anchor1" class="anchor1">錨點1</div>

    <p class="spacing1">間隔1</p>
    <p class="spacing2">間隔2</p>
    <p class="spacing1">間隔3</p>
    <p class="spacing2">間隔4</p>
    <p class="spacing1">間隔5</p>
    <p class="spacing2">間隔6</p>
    <p class="spacing1">間隔7</p>
    <p class="spacing2">間隔8</p>

    <div id="anchor2" class="anchor2">錨點2</div>

    <p class="spacing1">間隔1</p>
    <p class="spacing2">間隔2</p>
    <p class="spacing1">間隔3</p>
    <p class="spacing2">間隔4</p>
    <p class="spacing1">間隔5</p>
    <p class="spacing2">間隔6</p>
    <p class="spacing1">間隔7</p>
    <p class="spacing2">間隔8</p>
    <script>
      (function(window, undefined){
        // 監聽頁面加載完成後，檢查是否須要定位錨點
        window.onload = function(){
          scrollToAnchor();
        };

        // 監聽地址欄url的hash值改變時，檢查是否須要定位錨點
        window.onhashchange = function(){
          scrollToAnchor();
        };

        // 滾動到自定義的僞錨點
        function scrollToAnchor(){
          var hash = getHash(), // 獲取url的hash值
            anchor = getAnchor(hash), // 獲取僞錨點的id
            anchorDom, // 僞錨點dom對象
            anchorScrollTop; // 僞錨點距離頁面頂部的距離

          // 若是不存在僞錨點,則直接結束
          if(anchor.length < 1){
            return;
          }

          anchorDom = getDom(anchor);
          anchorScrollTop = anchorDom.offsetTop;

          animationToAnchor(document.body.scrollTop, anchorScrollTop);
        }

        /* 
            @function 滾動到指定位置方法
            @param startNum {int} -- 開始位置
            @param stopNum {int} -- 結束位置
        */
        function animationToAnchor(startNum, stopNum){
          var nowNum = startNum + 10; // 步進爲10

            if(nowNum > stopNum){
              nowNum = stopNum;
            }

            // 緩動方法
            window.requestAnimationFrame(function(){
                document.body.scrollTop = nowNum; // 當前示例頁面，滾動條在body，因此滾動body

                // 滾動到預約位置則結束
                if(nowNum == stopNum){
                  return;
                }

                animationToAnchor(nowNum, stopNum); // 只要還符合緩動條件，則遞歸調用
            });
        }

        // 獲取錨點id
        function getAnchor(str){
          return checkAnchor(str) ? str.split("w_")[1] : "";
        }

        // 判斷是否爲特殊的hash值，也便是否爲僞錨點
        function checkAnchor(str){
          return str.indexOf("w_") == 0 ? true : false;
        }

        // 獲取hash值
        function getHash(){
          return window.location.hash.substring(1);
        }

        // 獲取dom對象
        function getDom(id){
          return document.getElementById(id);
        }
      })(window);
    </script>
  </body>
</html>

閱讀原文：www.jianshu.com/p/aefa75666905url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。