Get started with simple-scrollspy CDN

MIT licensed

Lightweight library, Simple-scrollspy: Automatic scrolling, animating elements during vertical webpage navigation.

Tags:
  • scroll
  • scrollspy
  • menuspy

Stable version

Copied!

How to start using simple-scrollspy CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with simple-scrollspy CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.cdnhub.io/simple-scrollspy/2.4.2/simple-scrollspy.min.js"></script>
    <style>
        body {
            height: 2000px;
            margin: 0;
            padding: 0;
        }
        .scrollspy-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            padding: 15px;
        }
        .scrollspy-nav a {
            color: #fff;
            text-decoration: none;
            margin-right: 10px;
        }
        .scrollspy-nav a:hover {
            background-color: #555;
        }
        .scrollspy-nav li.active a {
            background-color: #666;
        }
    </style>
</head>
<body>
    <nav class="scrollspy-nav">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>
    <div id="home" class="animate__animated animate__fadeIn">
        <h1>Welcome to my website!</h1>
        <p>This is the home section.</p>
    </div>
    <div id="section1" class="animate__animated animate__fadeIn">
        <h2>Section 1</h2>
        <p>This is the first section.</p>
    </div>
    <div id="section2" class="animate__animated animate__fadeIn">
        <h2>Section 2</h2>
        <p>This is the second section.</p>
    </div>
    <div id="section3" class="animate__animated animate__fadeIn">
        <h2>Section 3</h2>
        <p>This is the third section.</p>
    </div>

    <script>
        new SimpleScrollSpy('.scrollspy-nav', {
            offset: 100
        });
    </script>
</body>
</html>
Copied!

All versions