JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div id="top">
    <span class="box">top</span>
    <span class="box_half"><a href="#demo1" class="uruna">to demo1</a></span>
    <span class="box_half"><a href="#demo2" class="uruna">to demo2</a></span>
</div>
<span class="box2"></span>

<div class="bigbox">Nothing</div>

<div class="box2" id="demo1">
    <span class="box">demo 1 </span><a href="#top" class="uruna">to top</a>
</div>

<div class="bigbox">Nothing</div>

<div class="box2" id="demo2">
    <span class="box">demo 2 </span><a href="#top" class="uruna">to top</a>
</div>

CSS

.box {
    padding: 1%;
    margin: 1%;
    background:#ddeecc;
    display:inline-block;
    width:40%;
    color:#000;
}
.box_half a {
    padding: 1%;
    margin: 1%;
    background:#333;
    display:inline-block;
    width:23%;
    color:#fff;
}
.bigbox {
    padding: 1%;
    margin: 1%;
    background:#ddeecc;
    display:block;
    width:96%;
    height:600px;
    color:#000;
}
.box2 a {
    padding: 1%;
    margin: 1%;
    background:#333;
    display:inline-block;
    width:46%;
    color:#fff;
}
.box_half a:hover, .box2 a:hover {
    background:#eee;
    color:#333;
}

JavaScript

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});