Onepage Website - 第2步: 加入選單相關特效

第2步: 加入選單相關特效(20分鐘)

第1步中所有的區塊都已經排好了,選單或連結都可以正常的連到位置,但現在有兩個問題要解決:

  1. 連到不同的區塊時,上方的選單並不會跟著變化被選中的樣式
  2. 連結時的動作感覺像是跳過去,不夠平順

1. 捲動間諜(Scrollspy)

首先加入一個Bootstrap中內建的"捲動間諜(Scrollspy)",它可以自動偵測現在使用者捲動到那個區塊,然後加上選中的樣式在對應的選單上。

打開js目錄中的custom.js檔案,加入以下的程式碼在$(document).ready(function (){這行之後,});這行之前:

/js/custom.js

/* 啟用 scrollspy 選單 */
$('body').scrollspy({
  target: '#navbar',
  offset: 50
});

解說

#navbar是我們選單區塊的id,對應的是以下這個區塊程式碼中的id="navbar"

<!-- 一般用的網站選單列 -->
      <div id="navbar" class="navbar-collapse collapse ">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home">首頁</a></li>
            <li><a href="#about">關於我們</a></li>
            <li><a href="#services">產品服務</a></li>
            <li><a href="#info">最新資訊</a></li>
            <li><a href="#contact">連絡我們</a></li>
        </ul>
      </div>
      <!-- 一般用的網站選單列 -->

所以如果你改用其他的id值,就要改變這個#navbar

offset: 50指的是上方選單的高度,預設是50px,如果你的選單高度比較高或低,你就需要改變這個數值。

其他相關的說明如下:

檢查點:試試捲動你的網頁,看上方選單是不是會跟著不同的區塊時變化樣式

2. 平順地捲動(Smooth ScrollTo)

平順捲動有很多種作法,也有很多jQuery的外掛可以協助作這件事,不過我們用的是最簡單的一種。直接加入這一段程式碼就可以了。

打開js目錄中的custom.js檔案,加入以下的程式碼在$(document).ready(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 - 50
        }, 1000);
        return false;
      }
    }
});

檢查點:試試點按你的網頁上的選單連結,或按鈕,看是不是有平順捲動的動畫。