解決方案：動畫滾動索引

構建字母順序索引導航，點擊觸發平滑滾動動畫至目標錨點，保持空間連續性，兼容 IE6+。

技術實現三步走

1. 頁面結構佈局

• HTML5 Doctype + Google jQuery 1.8.3 + html5shiv 兼容舊瀏覽器
• 自定義樣式 `styles.css` + 行為腳本 `indexscroller.js`
• Google Webfont (Milonga) + CSS3 視覺增強

<nav id="links">
  <ul class="clearfix">
    <li class="label">快速鏈接：</li>
    <li><a href="#indexa">A</a></li>
    <li><a href="#indexb">B</a></li>
    ...
    <li><a href="#indexg">G</a></li>
  </ul>
</nav>

<!-- 目標錨點區塊 -->
<a name="indexb"></a>
<div class="show">...內容...</div>

2. 關鍵 CSS 樣式要點

• 容器陰影、圓角、居中佈局
• 關鍵技巧： 目標錨點元素設 `padding-top: 8px`，滾動停留時留出視覺緩衝，避免標題貼頂。
• Clearfix 解決浮動塌陷

.show { display: block; padding-top: 8px; margin-bottom: 23px; }
.meta { float: right; font: bold 0.8em Arial, Verdana, sans-serif; color: #222; }

3. jQuery 核心邏輯（indexscroller.js）

$(document).ready(function() {
  $('#links > ul > li > a').on('click', function(e) {
    e.preventDefault(); // 阻止默認跳轉與 URL hash 變更
    var anchorId = $(this.hash);
    // 兼容舊式 name 錨點
    if (anchorId.length === 0) {
      anchorId = $('a[name="' + this.hash.substr(1) + '"]');
    }
    // 平滑滾動動畫 450ms
    $('html, body').animate({ scrollTop: anchorId.offset().top }, 450);
  });
});

核心 API 解析：

• `this.hash`：直接獲取 `href` 中 `#` 後的字符串（如 `"indexb"`）
• `anchorId.offset().top`：獲取目標元素距離文檔頂部的絕對像素值
• `.animate({ scrollTop: ... }, 450)`：450ms 緩動滾動，體驗絲滑

效果演示與應用場景

適用於：FAQ 頁面、長文檔檔、產品規格對照表、字母排序目錄等長內容頁面。優雅滾動替代生硬跳轉，顯著提升用戶空間定向感與閱讀連續性。

文章來源：夢想天空