JSFiddle - React, Tailwind, and code Playground

HTML

<div class='navbar-cont'>
    <div class='navbar'>
        <img src='http://machoarts.com/wp-content/uploads/2012/01/Sleek-Navigation-Bar.png' alt='Navigation Bar' width="619" height="48" usemap="#NavMap" />
        <map id="NavMap" name="NavMap">
            <area id="homeButton" shape="rect" coords="1,0,70,48" href="#" alt="Home" />
            <area id="newsButton" shape="rect" coords="76,0,150,48" href="#News" alt="News" />
            <div id="News">news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news news</div>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />

JavaScript

$(document).ready(function () {
    $("#homeButton").click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 1000);
    });

    $("#newsButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#News").offset().top
        }, 1000);
    });
});