Smooth Scroll

JavaScript

允許內部連結順利捲動。

設定

若要在內部連結啟用 SmoothScroll，只要將屬性 data-smooth-scroll 加入父容器，例如我們的選單。請注意，每個區段需要一個唯一的 ID。

<ul class="menu" data-smooth-scroll>
  <li><a href="#first">First Arrival</a></li>
  <li><a href="#second">Second Arrival</a></li>
  <li><a href="#third">Third Arrival</a></li>
</ul>
<div class="sections">
  <section id="first">First Section</section>
  <section id="second">Second Section</section>
  <section id="third">Third Section</section>
</div>

您也可以透過個別連結直接設定 SmoothScroll。

<a href="#exclusive" data-smooth-scroll>Exclusive Section</a>
<section id="exclusive">The Exclusive Section</section>

JavaScript 參考

初始化

若要使用此外掛程式，JavaScript 中必須包含下列檔案

foundation.core.js
foundation.smoothScroll.js

Foundation.SmoothScroll

建立 SmoothScroll 的新執行個體。

var elem = new Foundation.SmoothScroll(element, options);

觸發這些事件： SmoothScroll#event:init

名稱	類型	說明
`element`	物件	要加入觸發器的 jQuery 物件。
`options`	物件	覆寫預設外掛設定。

外掛選項

使用這些選項自訂 Smooth Scroll 的執行個體。外掛選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛建構函式的物件。進一步了解 JavaScript 外掛的初始化方式。

名稱	類型	預設	說明
`data-animation-duration`	`數字`	`500`	動畫捲動在各個位置之間所需的時間（以毫秒為單位）。
`data-animation-easing`	`字串`	`linear`	在各個位置之間捲動時要使用的動畫樣式。可以是 `'swing'` 或 `'linear'`。
`data-threshold`	`數字`	`50`	用於標記位置變更的像素數。
`data-offset`	`數字`	`0`	如果使用固定導覽列，在點選項目時用於抵銷頁面捲動的像素數。

方法

scrollToLoc

$('#element').foundation('scrollToLoc', loc, options, callback);

捲動到頁面特定位置的函式。

名稱	類型	說明
`loc`	字串	格式正確的 jQuery id 選擇器。範例：'#foo'
`options`	物件	要使用的選項。
`callback`	函式	回呼函式。

_destroy

$('#element').foundation('_destroy');

銷毀 SmoothScroll 執行個體。