Smooth Scroll

JavaScript

Allows internal links smooth scrolling.

Setup

To enable SmoothScroll on internal links, just add the attribute data-smooth-scroll to the parent container like our Menu. Please note that each section needs a unique 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>

You can also setup SmoothScroll directly via individual link.

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

JavaScript Reference

Initializing

The following files must be included in your JavaScript to use this plugin:

foundation.core.js
foundation.smoothScroll.js

Foundation.SmoothScroll

Creates a new instance of SmoothScroll.

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

Fires these events: SmoothScroll#event:init

Name	Type	Description
`element`	Object	jQuery object to add the trigger to.
`options`	Object	Overrides to the default plugin settings.

Plugin Options

Use these options to customize an instance of Smooth Scroll. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name	Type	Default	Description
`data-animation-duration`	`number`	`500`	Amount of time, in ms, the animated scrolling should take between locations.
`data-animation-easing`	`string`	`linear`	Animation style to use when scrolling between locations. Can be `'swing'` or `'linear'`.
`data-threshold`	`number`	`50`	Number of pixels to use as a marker for location changes.
`data-offset`	`number`	`0`	Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.

Methods

scrollToLoc

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

Function to scroll to a given location on the page.

Name	Type	Description
`loc`	String	A properly formatted jQuery id selector. Example: '#foo'
`options`	Object	The options to use.
`callback`	function	The callback function.

_destroy

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

Destroys the SmoothScroll instance.