]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
SmoothScroll module documentation page
authorNordanne Isahac <den.isahac@gmail.com>
Mon, 16 Jan 2017 00:19:08 +0000 (08:19 +0800)
committerNordanne Isahac <den.isahac@gmail.com>
Mon, 16 Jan 2017 00:19:08 +0000 (08:19 +0800)
docs/pages/smooth-scroll.md [new file with mode: 0644]

diff --git a/docs/pages/smooth-scroll.md b/docs/pages/smooth-scroll.md
new file mode 100644 (file)
index 0000000..5932757
--- /dev/null
@@ -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>
+```
+
+---