JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="http://www.example.com">http://www.example.com</a></li>
    <li><a href="#">empty hash</a></li>
    <li><a href="#2010">2010</a></li>
    <li><a href="#2009">2009</a></li>
    <li><a href="#2008">2008</a></li>
    <li><a href="#2007">2007</a></li>
    <li><a href="#2006">2006</a></li>
    <li><a href="#2005">2005</a></li>
    <li><a href="#2003">2003</a></li>
    <li><a href="#1999">1999</a></li>
 <ul>

     <div id="2010"><b>2010</b> sadfasf sdfg<br/> asfgas dfasdfasdfa<br/>sf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfdf asdf asdf <br/>asdf asdf a<br/>sdfasdf </div>
    <div id="2009"><b>2009</b> sadfasf sdfg<br/> asfgas dfasdfasdfa sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfbr/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2008"><b>2008</b> sadfasf sdfg<br/> asfgas dfasdfasdfabf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfr/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2007"><b>2007</b> sadfasf sdfg<br/> asfgas dfasdfasdfarf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdf/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2006"><b>2006</b> sadfasf sdfg<br/> asfgas dfasdfasdfa<br/>f sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfsdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2005"><b>2005</b> sadfasf sdfg<br/> asfgas dfasdfasdfaf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfbr/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2003"><b>2003</b> sadfasf sdfg<br/> asfgas dfasdfasdfabf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfr/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf </div>
    <div id="1999"><b>1999</b> sadfasf sdfg<br/> asfgas dfasdfasdfa<br/>f sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfsdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
        <div class="foot" />

CSS

div[id] {
    margin-top: 30px;
}

.foot {}

JavaScript

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');
    
    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }
    
    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();
    
    // top position relative to the document
    var pos = $id.offset().top - 40;
    
    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});