JSFiddle - React, Tailwind, and code Playground

HTML

<div id="faqmenu">
<a href="#id1">1</a>&nbsp;
<a href="#id2">2</a>&nbsp;
<a href="#id3">3</a>&nbsp;
<a href="#id4">4</a></div>
<div id="id1"><h1>Paragraph 1</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br>Donec sodales, nulla nec ultrices bibendum, diam purus auctor nisl, eget pharetra sem lorem vestibulum ipsum.<br><br>Mauris sed turpis felis, ac convallis quam.<br><br>Nam sem lacus, cursus ac mattis at, eleifend id ligula.<br><br>Nulla interdum auctor massa id interdum.<br><br>Quisque sagittis ipsum sit amet purus feugiat placerat.<br><br>Vestibulum sit amet turpis at quam ornare imperdiet viverra id turpis.<br><br>Vestibulum ac dapibus felis.<br><br>Cras non elit lectus.<br><br>Quisque eu arcu non elit molestie malesuada.<br><br>Phasellus sapien metus, ultrices at ultricies interdum, laoreet nec risus.<br><br>Aenean condimentum porta felis et blandit.<br><br>Etiam posuere sollicitudin diam, et semper massa imperdiet id.<br><br>Fusce ut diam et tellus ornare posuere in ultricies diam.</div>
<div id="id2"><h1>Paragraph 2</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br>Donec sodales, nulla nec ultrices bibendum, diam purus auctor nisl, eget pharetra sem lorem vestibulum ipsum.<br><br>Mauris sed turpis felis, ac convallis quam.<br><br>Nam sem lacus, cursus ac mattis at, eleifend id ligula.<br><br>Nulla interdum auctor massa id interdum.<br><br>Quisque sagittis ipsum sit amet purus feugiat placerat.<br><br>Vestibulum sit amet turpis at quam ornare imperdiet viverra id turpis.<br><br>Vestibulum ac dapibus felis.<br><br>Cras non elit lectus.<br><br>Quisque eu arcu non elit molestie malesuada.<br><br>Phasellus sapien metus, ultrices at ultricies interdum, laoreet nec risus.<br><br>Aenean condimentum porta felis et blandit.<br><br>Etiam posuere sollicitudin diam, et semper massa imperdiet id.<br><br>Fusce ut diam et tellus ornare posuere in ultricies diam.</div>
<div id="id3"><h1>Paragraph 3</h1>Lorem ipsum dolor sit amet,...

CSS

h1 {
 color:red;   
}
#faqmenu {
    background-color:white;
    z-index:1000;
    position:fixed;
    top:0;
    left:100px;
    border: 1px solid orange;
}

JavaScript

if ("onhashchange" in window) {
    $(window).bind('hashchange', function(e) {
        e.preventDefault();
       /* var href = location.hash;
        scrollToFaq(href);*/
        return false;
    });
}

function scrollToFaq(fakeHref) {
    var href = fakeHref.replace('xxx_', '');
    // scroll
    $('html,body').animate(
    // scroll to clicked item
    {
        scrollTop: $(href).offset().top
    }, 400, // duration in ms
    function() {
        // show back button if necessary
        if ($(window).scrollTop() > 60) {
            // onclick back to top button
            $('#back-top').fadeIn();
        }
    });
}

/*$('#faqmenu a').click(function(e) {
    // prevent default behaviour
    e.preventDefault();
    // cache href attribute
    var href = $(this).attr('href');
    location.hash = href.replace('#', '');
    scrollToFaq(href);
});*/