How to create a smooth scrolling effect using CSS ?

Last Updated : 24 Jan, 2024

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

smoo

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="https://www.geeksforgeeks.org/"> 
            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>