JSFiddle - React, Tailwind, and code Playground

by sazdan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
    <h2 id="one">One</h2>
    <p> Lorem Ipsum</p>
    <h2 id="two">Two</h2>
    <p>Lorem Ipsum.</p>
    <h2 id="three">Three</h2>
    <p>Lorem Ipsum</p>
    <h2 id="four">Four</h2>
    <p>Lorem Ipsum</p>
    <h2 id="five">Five</h2>
    <p>Lorem Ipsum</p>
    <h2 id="six">Six</h2>
    <p>Lorem Ipsum</p>
</div>

<aside>
    <ul>
        <li><a class="current" href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
        <li><a href="#five">Five</a></li>
        <li><a href="#six">Six</a></li>
    </ul>
</aside>

CSS

'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
      window.location.hash = target;
    });
  });

});
body {
    padding: 0 4em;
    margin: 0;
    font: 14px/1.8 Helvetica;
    color: #444;
}
a {
    text-decoration: none;
}

/* = Стили для контента */
#main {
    width: 75%;
}
h2 {
    font-size: 1.8em;
    border-bottom: 1px solid #444;
    position: relative;
}

p {
  height: 100vh;
}

/* = Стили для ссылки наверх */
h2 a {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 10px;
    font-size: 11px;
    color: #fff;
    background: #444;
    display: block;
}

/* = Стили для содержания */
aside {
    display: block;
    width: 20%;
    position: fixed;
    left: 78%;
    top: 50%;
}
li {
    list-style: square;
    color: #006600;
}
li a {
    font: bold italic 16px Helvetica;
    color: #006600;
}
li a:hover {
    color: #990000;
}

.current {
  color: red;
}

JavaScript

$(document).ready(function(){

  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();

    let target  = this.hash,
        $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
      window.location.hash = target;
    });
  });

});