JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<ul id="navbar1">
    <li><a class="scroll_nav" href="#top">Top</a>
    </li>
    <li><a class="scroll_nav" href="#middle">Middle</a>
    </li>
    <li><a class="scroll_nav" href="#bottom"> Bottom</a>
    </li>
</ul>
<ul id="submenu">
    <li><a class="scroll_nav" href="#itema">item 1</a>
    </li>
    <li><a class="scroll_nav" href="#itemb">item 2</a>
    </li>
    <li><a class="scroll_nav" href="#itemc">item 3</a>
    </li>
</ul>
<div class="wrapper">
     <h1 id="top"> Top </h1>

    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
     <h2 id="itema"> Item 1 </h2>

    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
     <h1 id="middle"> Middle </h1>

    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
    <p>Content Content Content Content...

CSS

/* These are fixed and will stay with the page */
#navbar1, #submenu {
    position: fixed;
    top: 0px;
    margin: 0px;
    bottom: 0px;
    width: 100px;
    box-sizing: border-box;
}
#navbar1 {
    left: 0px;
    background-color: black;
    color: white;
}
#submenu {
    left: 100px;
    background-color: gray;
    color: black;
}
/* Wrapper is absolute so that it is able to move with the body, but stay its distance from the left */
.wrapper {
    position: absolute;
    left: 200px;
    right: 0px;
    padding: 10px;
    box-sizing: border-box;
}

JavaScript

(function ($) {


    /**
     * scrollNav
     *
     * Scrolls to the global object's offset-top position. Offsets when 
     * margin_top is provided.
     *
     * @param number margin_top the offset of the top (0 default)
     * @return object returns jQuery element this.
     */
    
    $.fn.scrollNav = function (margin_top) {
        // Prevent links from doing default behavior
        event.preventDefault();
        // Get the target
        var 
            goTo = $(this).attr("href"),
            add_top = margin_top | 0;
        // do animation
        $('html, body').animate({
            scrollTop: $(goTo).offset().top + add_top
        }, 700);// change speed by changing 700 (in ms)
        return this;
    }
})($);

// Document loaded
$(document).ready(function () {

    // Apply event listener to .scroll_nav
    $(".scroll_nav").click(function () {
        $(this).scrollNav(-100);

    });

});