JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<div class="wrapper"><a href="#">Click Here</a><span class="offset">offset</span>
<div class="header"></div>
<div class="content"></div>
    <div class="footer"></div></div>

CSS

.header{
 height: 100px;
width: 100%;
background-color: red;    
}
.content{
    height: 1000px;
width: 1000px;
background-color: green;    
}
.footer{
 height: 100px;
width: 100%;
background-color: blue;    
}

JavaScript

(function($) {
    $.extend($.easing, {
        easeInOutQuint: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        }
    });
    $("a").click(function() {
        $(".content").animate({
            hide: "1"
        }, {
            duration: "5000",
            easing: "easeInOutQuint",
            step: function(now, fx){
                $("html, body").scrollTop($(".footer").offset().top);
            }
        });
    });
    })(jQuery);