JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<a href="#">scroll link</a>

<div class="filler-top"></div>

<div class="scroll-to-this"></div>

<div class="filler-bottom"></div>

CSS

body, html{
    height: 100%;
    margin: 0;
    padding: 0;
}

a{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    display: block;
    height: 50px;
    line-height: 50px;
    background: #eee;
    text-align: center;
    color: #000;
}

.filler-top{
    height: 1000px;
}

.filler-bottom{
    height: 1000px;
}

.scroll-to-this{
    height: 50px;
    background: pink;
}

JavaScript

$('a').click(function(e){
    e.preventDefault();
    $('body, html').animate({
        scrollTop: $('.scroll-to-this').offset().top - 150
    }, 1000);
});