如何讓網頁上的錨點,產生平滑過渡的效果?

這幾年由於行動網頁的崛起,為了適應行動網頁以觸控為核心的瀏覽方式,在製作網頁的時候,會更傾向將過去分成數個頁面的網頁合併成單一頁面,讓使用者在一次的下載後,就看到完整的網站內容,減少在頁面切換時等待下載的時間。只是,這樣的做法也導致網頁長度的增加,使用者在尋找特定區塊的內容時,容易因為過長的頁面而迷失其中。

所以在設計單頁內容很多的網頁時,都會先區隔出幾個大單元,然後在每個單元塊中安插錨點,讓使用者透過錨點快速切換內容。只是錨點也有個小缺點,那就是使用者在點選後,會直接跳到該區塊,就 UI & UX 的觀點來說,會太過突兀,缺少一點過渡性的導覽及暗示,也略顯急躁,如果能帶點過渡的效果,那就完美了。

這時我們就需要透過 Javascript 去產生上述的效果,方法如下:

第一步:載入 jQuery

由於這個效果會使用到 jQuery,所以我們需要在 head 的標籤裡引入 jQuery。
請記得將路徑改成自己的設定。

<script src="js/jquery-3.1.1.min.js"></script>

 

第二步:放入過渡效果的 Javascript

將下面的 Javascript 放置在 head 的標籤裡。
當然,你也可以把它包裝成一個 .js 的檔案,然後引入到頁面裡。

 

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

 

紅字的部分可以隨意調整為任意整數,數字越大,過渡的時間越長。

第三步:在頁面安插錨點

這裡有一點要注意,設定錨點位置要使用 <a name="anchor">錨點</a> 的方式,而非 <a id="anchor">錨點</a>

呼叫時,也只要設定簡單 a 連結,你也可以設定任意多組錨點,不用特別的設定,每個錨點就會有過渡效果,方式如下:

 

<a href="#anchor">連向名稱為 anchor 的錨點</a>

 

延伸閱讀:

發表意見