JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<div id="container">
    <a href="#dontScroll">Scroll w/ Animation</a> 
    <a href="#dontScroll" data-known="known">No Animation Known</a>
    <a href="#dontScroll" data-unknown="unknown">No Animation Unknown</a>
</div>
<div id="dontScroll">scroll to me</div>

CSS

#container{
    height: 1000px;
}

JavaScript

$('a[href^="#"]').click(function(event){
    if($.isEmptyObject($(this).data())){
            event.preventDefault();
            var navOffset = ($(window).width() > 979) ? 93 : 0;
            $('html, body').animate({
                'scrollTop': $($(this).attr("href")).offset().top - navOffset
            }, 'slow');
    }
});


/*$('a[href^="#"]:not([data-known])').click(function(event){
            event.preventDefault();
            var navOffset = ($(window).width() > 979) ? 93 : 0;
            $('html, body').animate({
                'scrollTop': $($(this).attr("href")).offset().top - navOffset
            }, 'slow');
 });*/