一、一頁式網站為什麼需要 Scroll 技巧？

一頁式網站通常會把首頁、服務介紹、作品案例、聯絡資訊等內容集中在同一個頁面中。這種設計簡潔直覺，但如果沒有良好的滾動設計，使用者很容易迷失在頁面中。

常見問題包含：

  • 點選導覽列後瞬間跳轉，體驗生硬
  • 不知道目前瀏覽到哪個區塊
  • 固定選單遮住標題內容
  • 手機版滑動距離過長，操作不順

因此，一頁式網站通常會搭配 Smooth Scroll 與 ScrollSpy，讓瀏覽流程更自然，也讓導覽資訊更清楚。

 

二、Smooth Scroll：讓錨點跳轉更滑順

Smooth Scroll 指的是點擊導覽列連結時，頁面不是瞬間跳到指定區塊，而是以平滑動畫滑動過去。

最簡單的方式可以直接使用 CSS：

 

html {
  scroll-behavior: smooth;
}

 

HTML 結構範例：

<nav>
  <a href="#about">關於我們</a>
  <a href="#service">服務項目</a>
  <a href="#contact">聯絡我們</a>
</nav>

<section id="about">關於我們內容</section>
<section id="service">服務項目內容</section>
<section id="contact">聯絡我們內容</section>

 

這種方式簡單、乾淨，不需要額外 JavaScript，很適合一般形象網站或活動頁使用。

 

三、固定導覽列常見問題：如何避免內容被遮住？

一頁式網站很常使用固定導覽列：

 

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

 

但固定導覽列會造成一個問題：
點擊錨點後，區塊標題可能被導覽列遮住。

可以在每個 section 加上：

 

section {
  scroll-margin-top: 80px;
}

 

scroll-margin-top 可以讓瀏覽器在跳轉時保留上方距離，避免內容被固定選單蓋住。

這是比過去用 padding 或空 div 更乾淨的做法，也比較容易維護。

 

四、ScrollSpy：讓導覽列自動顯示目前位置

ScrollSpy 的功能是：
當使用者滾動到某個區塊時，導覽列對應項目會自動變成 active 狀態。

例如滾到「服務項目」時：

 

<a href="#service" class="active">服務項目</a>

 

簡單概念如下：

const sections = document.querySelectorAll("section");
const navLinks = document.querySelectorAll("nav a");

window.addEventListener("scroll", () => {
  let current = "";

  sections.forEach(section => {
    const sectionTop = section.offsetTop - 100;
    if (window.scrollY >= sectionTop) {
      current = section.getAttribute("id");
    }
  });

  navLinks.forEach(link => {
    link.classList.remove("active");

    if (link.getAttribute("href") === `#${current}`) {
      link.classList.add("active");
    }
  });
});

這段程式會根據目前頁面滾動位置，自動判斷所在區塊，並更新導覽列樣式

 

五、實戰建議：讓 Scroll 體驗更穩定

在實際開發一頁式網站時，建議注意以下幾點：

1. section 高度要足夠
如果區塊太短，ScrollSpy 可能快速跳動，使用者不容易感覺變化。

2. active 樣式要明顯
可以用顏色、底線或背景區塊提示目前位置。

3. 手機版導覽要簡化
手機版可以改成漢堡選單，點擊後自動收合。

4. 避免過度動畫
Smooth Scroll 太慢會讓使用者覺得拖延，速度應自然即可。

5. 注意效能問題
Scroll 事件觸發頻率高，複雜效果建議搭配 IntersectionObserver 或節流處理。

 

好的 Scroll 設計，是一頁式網站的導航感

一頁式網站的重點不只是把內容放在同一頁，而是讓使用者能自然理解「自己在哪裡、下一步去哪裡」。

Smooth Scroll 負責讓移動過程更順，ScrollSpy 則負責提供方向感。當兩者搭配得好，網站就會從單純的資訊頁，升級成更完整、更有節奏感的瀏覽體驗。