hash實現錨點平滑滾動定位

本文轉載自查看原文 2017-01-15 21:15 6616 anchor/ 定位/ HTML/ 錨點/ javascript/ hash

一、科普時間

hash

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

錨點

錨點是網頁制作中超級鏈接的一種，又叫命名錨記。命名錨記像一個迅速定位器一樣，是一種頁面內的超級鏈接

二、錨點簡單的栗子

<!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
雖然可以直接定位到制定的位置，但是效果很差，沒有平緩的過渡效果。

三、改進過渡效果

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.html

最后，附上完整示例源碼

<!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/aefa75666905

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於vue監聽滾動事件，實現錨點鏈接平滑滾動使用jquery animate實現錨點慢慢平滑滾動效果 ul li 橫向滾動錨點的平滑跳轉 jquery 實現錨點滾動效果超詳細Vue實現導航欄綁定內容錨點+滾動動畫+vue-router(hash模式可用) vue 錨點定位，並平滑過渡原生JS實現返回頂部和滾動錨點 A錨點實現，滾動頁面內容改變tab選項 vue 監聽滾動事件，實現動態錨點 vue項目錨點定位+滾動定位