Foundation CSS Smooth Scroll Installation

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device.

For setup/installation of the Smooth Scroll in our code just add the attribute data-smooth-scroll to the parent container like our menu and give a unique ID to each section.

Syntax:

<ul class="menu" data-smooth-scroll>
 ...
</ul>

 

Example 1: The following code demonstrates one of the smooth scroll features of Foundation CSS.

Output:

👁 Image

Example 2: The following code demonstrates another smooth scroll feature of Foundation CSS.

Output:            

👁 Image

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