<nav class="anchor-nav">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<div class="content-box">
<section id="section1" style="background:#eff6ff"><h2>Section 1</h2></section>
<section id="section2" style="background:#f0fdf4"><h2>Section 2</h2></section>
<section id="section3" style="background:#fff7ed"><h2>Section 3</h2></section>
</div>
.anchor-nav {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: sticky;
top: 20px;
display: flex;
justify-content: center;
gap: 20px;
background: white;
padding: 15px;
border-radius: 50px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
margin-bottom: 20px;
z-index: 10;
}
.anchor-nav a {
text-decoration: none;
color: #4b5563;
font-weight: 500;
transition: color 0.2s;
}
.anchor-nav a:hover {
color: #2563eb;
}
section {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #374151;
border-radius: 12px;
margin-bottom: 20px;
}
document.querySelectorAll("a[href^=\"#\"]").forEach(anchor => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
if (target) {
target.scrollIntoView({
behavior: "smooth"
});
}
});
});
