CSS scroll-behavior Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">:root {
  --accent: #0b5fff;
  --bg: #f7f9fc;
  --card: #ffffff;
}

/* Enable smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: #0b1a2b;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  z-index: 1000;
}

.top-nav a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.hero {
  padding: 100px 1rem 40px;
  text-align: center;
}

/* Ensure anchored sections are offset below the fixed nav */
.panel {
  padding: 80px 1rem;
  min-height: 70vh;
  background: var(--card);
  border-top: 1px solid rgba(11, 95, 255, 0.06);
  scroll-margin-top: 72px; /* offset for fixed nav when jumping to anchors */
}

.panel:nth-of-type(even) {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

h2 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #08306f;
}

p {
  max-width: 60ch;
  margin: 0.5rem auto;
}

.footer {
  padding: 40px 1rem;
  text-align: center;
  color: #667;
}

/* Small hover effect for links */
.top-nav a:hover,
.footer a:hover {
  text-decoration: underline;
}
</style></head><body><nav class="top-nav">
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#section3">Section 3</a>
    <a href="#top">Top</a>
  </nav>

  <main id="top">
    <header class="hero">
      <h1>Smooth Scroll with CSS</h1>
      <p>Click the links in the fixed navigation to jump between sections. The browser will animate the scroll.</p>
    </header>

    <section id="section1" class="panel">
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, justo non dictum porta, nunc nibh dictum arcu, nec faucibus turpis nunc nec urna.</p>
      <p>Phasellus vitae lacus a risus dictum feugiat. Curabitur sit amet mi id lorem gravida aliquet.</p>
    </section>

    <section id="section2" class="panel">
      <h2>Section 2</h2>
      <p>Nullam vel nibh sit amet quam tristique tincidunt. Mauris vitae sem non nisl facilisis gravida.</p>
      <p>Aliquam erat volutpat. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </section>

    <section id="section3" class="panel">
      <h2>Section 3</h2>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
    </section>

    <footer class="footer">
      <p>End of demo  -  <a href="#top">Back to top</a></p>
    </footer>
  </main></body></html>