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.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Smooth Scroll</title> <link rel="stylesheet" href= crossorigin="anonymous" /> <script src= </script> <script src= crossorigin="anonymous"> </script> <style> ul { text-align:center; justify-content:center; } a { margin: 10px 80px; } a:hover { color: rgb(9, 32, 243); font-weight: bold; } </style> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Foundation CSS Smooth Scroll Setup</h3> <ul class="menu" data-smooth-scroll> <li><a href="#first">GFG1</a></li> <li><a href="#second">GFG2</a></li> <li><a href="#third">GFG3</a></li> </ul> </center> <div class="container" style="margin:40px 190px;"> <div id="first"> <h3>GeeksforGeeks1</h3> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. A Computer Science portal for geeks. </div> <div id="second"> <h3>GeeksforGeeks2</h3> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. A Computer Science portal for geeks. </div> <div id="third"> <h3>GeeksforGeeks3</h3> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. A Computer Science portal for geeks. </div> </div> </body> </html> |
Output:
Example 2: The following code demonstrates another smooth scroll feature of Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Smooth Scroll</title> <link rel="stylesheet" href= crossorigin="anonymous" /> <script src= </script> <script src= crossorigin="anonymous"> </script> <style> ul { text-align: center; justify-content: center; } a { margin: 10px 80px; } a:hover { color: rgb(222, 92, 11); font-weight: bold; } </style> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Foundation CSS Smooth Scroll Setup</h3> <ul class="menu" data-smooth-scroll> <li><a href="#first">C++</a></li> <li><a href="#second">JAVA</a></li> <li><a href="#third">PYTHON</a></li> </ul> </center> <div class="container" style="margin:40px 190px;"> <div id="first"> <h3>C++ Language</h3> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. C++ runs on lots of platforms like Windows, Linux, Unix, Mac etc. </div> <div id="second"> <h3>JAVA Language</h3> Java syntax is similar to C/C++. But Java does not provide low-level programming functionalities like pointers. Also, Java codes are always written in the form of classes and objects. </div> <div id="third"> <h3>PYTHON Language</h3> Java syntax is similar to C/C++. But Java does not provide low-level programming functionalities like pointers. Also, Java codes are always written in the form of classes and objects. </div> </div> </body> </html> |
Output:
Reference: https://get.foundation/sites/docs/smooth-scroll.html#setup
Please Login to comment...