JSFiddle - React, Tailwind, and code Playground
JavaScript
function AnimateScrolling( $links ) {
var _this = this;
/**
* Binding the event handler
*
* @this {object} The clicked link
*/
$links.on( "click", function( event ){
event.preventDefault();
_this.animate( this );
});
}
AnimateScrolling.prototype.animate = function( singleLink ) {
$("html, body").animate({
scrollTop: this.offset( singleLink )
});
};
AnimateScrolling.prototype.offset = function( singleLink ) {
var section = $( singleLink ).attr( 'data-section' );
section = $( '#' + section ).offset();
return section.top;
};
$(document).ready(function() {
var links = new AnimateScrolling($('#nav a'));
});