biofriction-wp-theme/node_modules/foundation-sites/docs/pages/smooth-scroll.md

1.6 KiB

title description js tags
Smooth Scroll Allows internal links smooth scrolling. js/foundation.smoothScroll.js
navigation

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>