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.
<!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.
<!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