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.

edit on codepen button
<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.

edit on codepen button
<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

NameTypeDescription
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.

NameTypeDescription
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.