|
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 and scroll-behavior: smooth that enables smooth scrolling behavior. - The element <nav> contains the style background-color, padding:20px, and
text-decoration: none that removes 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, and min-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>
<a href="/archive/">
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>
horje-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:
|
What is a React component?
What is the use of <canvas> Tag in HTML ?