JSFiddle - React, Tailwind, and code Playground

by Scoobler

HTML

<a href="#jumpToMe">Jump to the bottom</a>

<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/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<a name="jumpToMe"></a>
<span>You jumped here</span>

JavaScript

$('a').click(function(e){
    if ($(this).attr('href').indexOf('#')!=-1)
    {
        e.preventDefault();
        jumpTo($('a[name=jumpToMe]'));
    }
});

function jumpTo(element){
    var itemOffset = $(element).offset().top;
    $('html, body').animate({scrollTop: itemOffset}, 1000, "linear", function(){
        var item = $(element).next();
        var bg = $(item).css('backgroundColor');
        var font = $(item).css('font-size');
        $(item).animate( { backgroundColor: 'yellow' }, 800)
            .animate( { fontSize: '5em' }, 800)
            .animate( { backgroundColor: bg }, 800)
            .animate( { fontSize: font }, 800);
    });
}