Get started with simple-scrollspy CDN

MIT licensed

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

  • scroll
  • scrollspy
  • menuspy

Stable version


How to start using simple-scrollspy CDN

<!DOCTYPE html>
    <title>Get started with simple-scrollspy CDN -</title>
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
        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 a {
            background-color: #666;
    <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>
    <div id="home" class="animate__animated animate__fadeIn">
        <h1>Welcome to my website!</h1>
        <p>This is the home section.</p>
    <div id="section1" class="animate__animated animate__fadeIn">
        <h2>Section 1</h2>
        <p>This is the first section.</p>
    <div id="section2" class="animate__animated animate__fadeIn">
        <h2>Section 2</h2>
        <p>This is the second section.</p>
    <div id="section3" class="animate__animated animate__fadeIn">
        <h2>Section 3</h2>
        <p>This is the third section.</p>

        new SimpleScrollSpy('.scrollspy-nav', {
            offset: 100

All versions