How to create a smooth scrolling effect using CSS ?
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 > w3wiki </ 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 w3wiki!</ 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 > w3wiki-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: