From: Nordanne Isahac <den.isahac@gmail.com>
Date: Mon, 16 Jan 2017 00:19:08 +0000 (+0800)
Subject: SmoothScroll module documentation page
X-Git-Tag: v6.4.0-rc1~102^2~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5837e6d554a62b49b3d209de5669b39f48549a30;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

SmoothScroll module documentation page
---

diff --git a/docs/pages/smooth-scroll.md b/docs/pages/smooth-scroll.md
new file mode 100644
index 000000000..59327576f
--- /dev/null
+++ b/docs/pages/smooth-scroll.md
@@ -0,0 +1,40 @@
+---
+title: Smooth Scroll
+description: Allows internal links smooth scrolling.
+js: js/foundation.smoothScroll.js
+tags:
+  - navigation
+---
+
+<ul class="menu vertical" data-smooth-scroll>
+  <li><a href="#setup">Setup</a></li>
+  <li><a href="#javascript-reference">Javascript Reference</a></li>
+</ul>
+
+<br>
+
+## Setup
+
+To enable SmoothScroll on internal links, just add the attribute `data-smooth-scroll` to the parent container like our [Menu](menu.html). Each section needs a unique ID
+
+```html
+<ul class="horizontal 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 indiviual link.
+
+```html
+<a href="#exclusive" data-smooth-scroll>Exclusive Section</a>
+<section id="exclusive">The Exclusive Section</section>
+```
+
+---