<section id="one" class="primary-color"></section>

    <section id="two" class="default-color"></section>

    <section id="three" class="stylish-color"></section>

    <section id="four" class="secondary-color"></section>

    <section id="five" class="deep-purple"></section>

    <section id="six" class="success-color"></section>

​

    <!-- Scrollspy -->

    <div class="dotted-scrollspy">

        <ul class="nav smooth-scroll clearfix d-none d-sm-flex flex-column">

            <li class="nav-item"><a class="nav-link" href="#one"><span></span></a></li>

            <li class="nav-item"><a class="nav-link" href="#two"><span></span></a></li>

            <li class="nav-item"><a class="nav-link" href="#three"><span></span></a></li>

            <li class="nav-item"><a class="nav-link" href="#four"><span></span></a></li>

            <li class="nav-item"><a class="nav-link" href="#five"><span></span></a></li>

            <li class="nav-item"><a class="nav-link" href="#six"><span></span></a></li>

        </ul>

    </div>