平滑滚动

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

名称	类型	描述
`元素`	对象	要添加触发器的 jQuery 对象。
`选项`	对象	默认插件设置的替代。

插件选项

使用这些选项来自定义平滑滚动的实例。插件选项可以设置为单独的数据属性，一个组合的 data-options 属性，或者作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认	描述
`data-animation-duration`	`数字`	`500`	动画滚动在位置之间应花费的时间（以毫秒为单位）。
`data-animation-easing`	`字符串`	`线性`	在位置之间滚动时使用的动画样式。可以是 `'swing'` 或 `'linear'`。
`data-threshold`	`数字`	`50`	用作位置更改标记的像素数。
`data-offset`	`数字`	`0`	如果使用粘性导航栏，则在项目单击时偏移页面滚动的像素数。

方法

scrollToLoc

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

滚动到页面上给定位置的函数。

名称	类型	描述
`loc`	字符串	格式正确的 jQuery ID 选择器。示例：'#foo'
`选项`	对象	要使用的选项。
`回调`	函数	回调函数。

_destroy

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

销毁 SmoothScroll 实例。