Menu：錨點選單遇到的大小事

如今的網站有很高的比例是使用一頁式的架構，尤其在活動網頁更是常見。而在這些一頁式網站中的選單幾乎都是利用錨點跳轉的方式，點擊選單後可以直接滾動到該指定區塊。錨點看似簡單卻隱含了一些需要注意的地方，我們一起看下去吧！

----

1. 錨點是什麼？怎麼套用？

選單中的錨點讓使用者可以更便利的在很長的頁面中快速滾動至指定區塊，不需慢慢滾動滑鼠來尋找。而錨點的概念類似於給按鈕一個連結，但並非跳轉至某條網址，而是頁面中的某個區塊。我們只要將按鈕與欲連動的指定區塊套上一樣的id，就能夠完成錨點的設定。

Navbar架構：

<nav class="navbar">
   <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-menu">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#about">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#service">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

頁面區塊架構：

<div id="about">這裡是About us區塊</div>
<div id="service">這裡是Services區塊</div>
<div id="contact">這裡是Contact us區塊</div>

在上面的例子中，可以看到navbar 裡面的 .nav-link 把跟區塊相同的id名稱放入href="#id名稱"中，如此一來就完成了錨點的連動。

2. 錨點點擊後的滾動效果突兀

在套好錨點、嘗試點擊時，可能會發現實際上並不像想像中在畫面滾動時有滑順的效果，而是畫面瞬間移動至連動的區塊，如此一來會讓使用者在錨點的切換上有突兀感。

為了解決這個狀況，我們可以在css中加入一句：

html {
  scroll-behavior: smooth;
}

支援此語法的瀏覽器有以下：

3. 懸浮Navbar錨點切換時遮蓋頁面內容

假如網站的Navbar為 position: fixed; 或是 position: sticky; ，則當點擊錨點切換區塊時可能發生Navbar遮蓋頁面內容的狀況：

懸浮的Navbar是有高度的，假設高度為 100px，那麼點擊錨點後切換到的區塊會被Navbar的高度遮住，只看得到定位點下方 100px 處的內容，而這個狀況會造成使用者在閱讀時有很大的困擾，在這邊提供以下幾種解決方法：

一、快速的Css解法

:root {
  scroll-padding-top: 3rem;
}

我們可以在Css中加入以上語法來設定滾動後頁面上區塊本身要偏移計算的內距，只需要把後面的數字改為Navbar的高度，就再也不會遮蓋住頁面內容了。

二、正值padding+負值margin

.區塊class name{
 padding-top: 3rem; /* 此數值為Navbar高度 */    
 margin-top: -3rem; 
}

我們都知道可以利用padding來讓區塊內容偏移，因此我們可以將區塊的 padding-top 數值設定為Navbar的高度，再利用負的等值 margin-top 把這段位移的距離抵銷，如此一來不僅可以讓區塊內容免於被Navbar遮住，也不會有突兀的空白出現。

三、用空白元素撐高空間

<div class="empty" id="empty-anchor"></div>
<div class="about">About us</div>

.empty-anchor {
  display: block;
  height: 3rem; /*此數值為Navbar高度*/
  margin-top: -3rem;
  visibility: hidden;
}

此方法原理為，在原本要跳轉的區塊上方再加入一個空白區塊，並把Navbar的.nav-link連動的id改為此空白區塊的id

讓這個空白區塊的高度設定為等同Navbar的高度，再以負的margin-top將此高度抵銷，且設定 visibility: hidden;將本空白區塊隱藏。

以上三種方法是單純利用Css的設定就可以達成頁面內容不被遮蓋的目的，可依據實際應用情況選擇使用。

4. 點擊錨點時，Active的選項改變樣式

當我們點擊錨點以後，頁面滑動至該區塊時，會期待選單中的選項樣式改為active的狀態，如下舉例：

在bootstrap中若將元件加上 active 的class name，則表示此元件為 active 狀態，因此我們可以了解成「若此元件擁有 .active 時，則該元件讀取 .active 的 Css 樣式」

我們可以先將想要的 active 樣式以 css 寫好，並藉由簡單的 js 語法實現：

.nav-link.active {
   text-decoration: none;
   color: #e6266e;
   border-bottom: solid 3px #e6266e;
}

$(function () {
  $(".nav-link").on("click", function () {
    $(".nav-link").removeClass("active");
    $(this).addClass("active");
  });
});

透過上面的 js 語法，就可以在點擊錨點時為該選項加上 active 的 class ，並套上對應的 active 樣式了。

----

以上幾點就是這次統整錨點選單最常遇到的幾個小問題，下方是排除以上問題的錨點選單示意，下次使用錨點選單時不妨試試看這些小撇步～

----

參考來源：

https://blog.csdn.net/chjcjchen/article/details/107538548

https://zhuanlan.zhihu.com/p/127781764

https://codepen.io/DriftKingTW/pen/abpaYYb