<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"
      });
    }
  });
});

Back to Snippets

Smooth Scroll to Anchor JS

Create a premium navigation experience with smooth scrolling. When users click an anchor link, the page glides gently to the target section instead of jumping instantly, which helps them maintain context.

381

#javascript

#css

#scroll

#anchor

#navigation

#smooth scroll

#ui

/HTML *CSS ()JS Output Live Updates

Smooth Scroll to Anchor JS

Share Code Snippet