Menu Jumping to Sectons within a page

Vue js technique for menu to jump to sections within a scrollable page.

by John Passmore

HTML

<head>
    <meta charset="utf-8">

   

</head>
<body>
<div id="app">

    <header class="nav is-fixed">
        <scrollactive ref="scrollactive" :offset="100" :duration="600" >
            <ul style="list-style-type:none;">
                <li><a href="#section-1" class="scrollactive-item">Section 1</a></li>
                <li><a href="#section-2" class="scrollactive-item">Section 2</a></li>
                <li><a href="#section-3" class="scrollactive-item">Section 3</a></li>
                <li><a href="#section-4" class="scrollactive-item">Section 4</a></li>
            </ul>
        </scrollactive>
    </header>

    <main>
        <header>
            <h1>Content Heading</h1>
        </header>

        <section id="section-1" class="section">
            <h1 class="heading title is-1">Section 1</h1>
        </section>

        <section id="section-2" class="section">
            <h1 class="heading title is-1">Section 2</h1>
        </section>

        <section id="section-3" class="section">
            <h1 class="heading title is-1">Section 3</h1>
        </section>

        <section id="section-4" class="section">
            <h1 class="heading title is-1">Section 4</h1>
        </section>
    </main>

</div> <!-- app -->
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-scrollactive.min.js"></script>

CSS

<style>
        .nav.is-fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
        .nav.is-fixed .is-active{
            color:#00d1b2
        }
        main {
            margin-left: 200px;
        }
        .section {
            height: 500px;
            border: 1px dashed;
            padding: 10px;
            margin: 10px;
        }
    </style>

JavaScript

<script>

    var app = new Vue({
        el: '#app',
        data: {
            offset: 200,
            duration: 100
        }
    })


</script>