Smooth scrolling is employed on web pages to enhance the user experience by providing a visually appealing and seamless transition between different sections of the page. It improves readability and enhances navigation. Using the CSS property scroll-behaviour we can achieve the smooth scrolling effect.
Preview
Approach
- Create the basic structure of the web page using <nav>, <a>, <section> and <p> elements in the HTML document file.
-
The element <body> contains properties like
margin: 0 that
removes default margin andscroll-behavior: smooth that
enables smooth scrolling behavior. -
The element <nav> contains the style background-color, padding:20px, and
text-decoration: none that r
emoves underlines from links. -
The element <section> contains the style
padding: 50px that
adds padding to each section,text-align: center that
Centers text within sections, andmin-height: 400px;
: Sets a minimum height for sections. -
Four sections with unique IDs (
#home
,#about
,#contacts
,#courses
) that will be used as value for <a> element to provide scroll behaviour. Each section contains an<h2>
heading and a<p>
paragraph with specific content.
Example: Illustration of smooth scrolling effect using CSS.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width,initial-scale=1.0" >
< title >Smooth Scrolling Effect </ title >
< style >
body {
margin: 0;
font-family: Arial, sans-serif;
scroll-behavior: smooth;
}
nav {
background-color: #207217;
padding: 20px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
}
section {
padding: 50px;
text-align: center;
min-height: 400px;
}
#home {
background-color: #f2f2f2;
}
#about {
background-color: #ffc107;
}
#contacts {
background-color: #28a745;
color: #fff;
}
#courses {
background-color: #007bff;
color: #fff;
}
</ style >
</ head >
< body >
< nav >
GeeksforGeeks
</ a >
< a href = "#home" >Home</ a >
< a href = "#about" >About</ a >
< a href = "#contacts" >Contacts</ a >
< a href = "#courses" >Courses</ a >
</ nav >
< section id = "home" >
< h2 >Home Section</ h2 >
< p >Welcome to GeeksforGeeks!</ p >
</ section >
< section id = "about" >
< h2 >About Section</ h2 >
< p >
DSA is defined as a combination of
two separate yet interrelated topics
– Data Structure and Algorithms.
</ p >
</ section >
< section id = "contacts" >
< h2 >Contact Us</ h2 >
< p >
geeksforgeeks-footer-logo
A-143, 9th Floor, Sovereign Corporate
Tower, Sector-136, Noida, Uttar Pradesh
- 201305
</ p >
</ section >
< section id = "courses" >
< h2 >Our Courses</ h2 >
< p >DSA, MERN</ p >
</ section >
</ body >
</ html >
|
Output:
Article Tags :
Recommended Articles