Creating a Scrollable Section Navigation in HTML and CSS

 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    
     rel="stylesheet" href="styles.css">


     class="nav">
        

            
 href="#section1">Section 1
            
 href="#section2">Section 2
            
 href="#section3">Section 3
        
    

    

         id="section1" class="section">
            
Section 1
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
         id="section2" class="section">
            
Section 2
            
Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        
         id="section3" class="section">
            
Section 3
            
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
        
    

    

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.nav {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav ul li {
    display: inline-block;
    margin-right: 20px;
}

.nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
}

.nav ul li a:hover {
    background-color: #555;
}

.main {
    padding: 20px;
}

.section {
    padding: 20px;
    margin: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

document.addEventListener("DOMContentLoaded", function() {
    const links = document.querySelectorAll('.nav a');

    links.forEach(link => {
        link.addEventListener('click', clickHandler);
    });

    function clickHandler(e) {
        e.preventDefault();
        const href = this.getAttribute("href");
        const offsetTop = document.querySelector(href).offsetTop;

        scroll({
            top: offsetTop,
            behavior: "smooth"
        });
    }
});