Foundation CSS Smooth Scroll

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. 

The Smooth Scroll enables scrolling to the specific section within the webpage without refreshing. We can enable the Smooth Scroll on internal links, just by adding the data-smooth-scroll attribute to the parent container. Each component requires a unique ID.

Foundation CSS Smooth Scroll Attribute:

• data-smooth-scroll: This attribute must be added to the parent container, in order to enable Smooth Scroll to the required link

Foundation CSS Smooth Scroll Class:

• menu: This class is used to create a navigation menu that contains the links to the important pages.

Syntax:

<ul class="menu" data-smooth-scroll>
 <li>
 <a href="#first">Content 1</a>
 </li>
 <li>
 <a href="#second">Content 2</a>
 </li>
</ul>
<div class="sections">
 <section id="first">
 Section 1 Content 
 </section> 
 <section id="second">
 Section 2 Content 
 </section>
</div>

Example 1: This example describes the smooth scroll with sticky navigation in Foundation CSS.

Output:

👁 Image

Example 2: This example describes the setting up smooth scroll directly with an individual link.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/smooth-scroll.html