JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header id="header">
        <nav>
            <a href="#down">To bottom of page</a>
        </nav>
         <h1>Site Title</h1>
    </header>
    <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra volutpat nisi vitae malesuada. Integer faucibus felis nec interdum sollicitudin. Nulla scelerisque nulla sit amet nunc convallis, sed placerat dui rutrum. Integer vel augue pulvinar sapien placerat pharetra a quis orci. Nam eu lectus lectus. Nam pretium sem quis enim adipiscing, quis posuere libero condimentum. Vestibulum ornare, urna a sodales hendrerit, dolor leo faucibus dolor, ut egestas odio urna a ligula. Sed vulputate lorem quis consequat mattis. Sed sit amet orci non odio faucibus molestie vel a nulla. Sed sollicitudin ipsum eu purus pretium, id rhoncus odio scelerisque. Praesent at accumsan nisl. Nullam id turpis ligula. Aenean urna tortor, congue eget arcu vel, vehicula pellentesque augue. Nulla ac laoreet purus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra volutpat nisi vitae malesuada. Integer faucibus felis nec interdum sollicitudin. Nulla scelerisque nulla sit amet nunc convallis, sed placerat dui rutrum. Integer vel augue pulvinar sapien placerat pharetra a quis orci. Nam eu lectus lectus. Nam pretium sem quis enim adipiscing, quis posuere libero condimentum. Vestibulum ornare, urna a sodales hendrerit, dolor leo faucibus dolor, ut egestas odio urna a ligula. Sed vulputate lorem quis consequat mattis. Sed sit amet orci non odio faucibus molestie vel a nulla. Sed sollicitudin ipsum eu purus pretium, id rhoncus odio scelerisque. Praesent at accumsan nisl. Nullam id turpis ligula. Aenean urna tortor, congue eget arcu vel, vehicula pellentesque augue. Nulla ac laoreet purus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra volutpat nisi vitae malesuada. Integer faucibus felis nec interdum sollicitudin. Nulla scelerisque nulla...

CSS

h1 {
    font-size: 96px;
    text-align: center;
}

nav a, #down a {
    display: block;
    width: 100%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 30px;
    background: gray;
    color: white;
}

JavaScript

$(document).ready(function () {
    function filterPath(string) {
        return string.replace(/^\//, '')
            .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
            .replace(/\/$/, '');
    }
    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');
    $('a[href*=#]').each(function () {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
            var $target = $(this.hash),
                target = this.hash;
            if (target) {
                var targetOffset = $target.offset().top;
                $(this).click(function (event) {
                    event.preventDefault();
                    $(scrollElem).animate({
                        scrollTop: targetOffset
                    }, 400, function () {
               // commented line below because it adds a hash to the url and a history item
                        // location.hash = target;
                    });
                });
            }
        }
    });
    // use the first element that is "scrollable"
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i < argLength; i++) {
            var el = arguments[i],
                $scrollElement = $(el);
            if ($scrollElement.scrollTop() > 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop() > 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }
});