JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-2" role="navigation">
    <ul class="nav" id="sidemenu">
        <li>
            <a href="#">Lorem ipsum dolo</a>
        </li>
        <li>
            <a href="#">Lorem ipsum dolo</a>
        </li>
        <li>
            <a href="#">Lorem ipsum dolo</a>
        </li>
    </ul>
</div>
<button id="sidebutton">side button</button>

CSS

#sidemenu, .hidden {
     display: none;
 }
 #sidemenu.current {
     display:block;
 }
 #sidebutton {
     position: fixed;
 }
 body {
     height: 1000px;
     width: 200px;
 }

JavaScript

var scrollTo;
var prevScrolPos;

$('#sidebutton').click(function () {

    if (!$('#sidemenu').hasClass("current")) {
        // if the menu is hidden, save the current scroll position and scroll to top
        prevScrolPos = $('body').scrollTop();
        scrollTo = 0;
    } else {
        // if the menu is not hidden, scroll to the saved position
        scrollTo = prevScrolPos;
    }

    $('#sidemenu').toggleClass("current") && $('html,body').scrollTop(scrollTo);
    $('.nodisplay').toggleClass("hidden");

});