Get started with smooth-scroll CDN

MIT licensed

Library smooths web page scrolling to specific elements.

Tags:
  • smooth
  • scroll

Stable version

Copied!

How to start using smooth-scroll CDN


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.cdnhub.io/smooth-scroll/16.1.3/smooth-scroll.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const links = document.querySelectorAll('a[href^="#"]');

        links.forEach(link => {
          link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            smoothScroll.animateScroll(target.offsetTop, 500);
          });
        });
      });
    </script>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main id="about">
        <!-- Content about section -->
    </main>
    <main id="services">
        <!-- Content services section -->
    </main>
    <main id="contact">
        <!-- Content contact section -->
    </main>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions