JSFiddle - React, Tailwind, and code Playground

by johnpapa

HTML

<div smooth-scroll duration="800" easing="easeInQuint" offset="120">hello</div>
<a href="#" scroll-to="foo">Click me!</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/>
<div id="foo">foo</div>

JavaScript

/* =============================================================
/*
/*	 Angular Smooth Scroll 1.7.1
/*	 Animates scrolling to elements, by David Oliveros.
/*
/*   Callback hooks contributed by Ben Armston
/*   https://github.com/benarmston
/*
/*	 Easing support contributed by Willem Liu.
/*	 https://github.com/willemliu
/*
/*	 Easing functions forked from Gaëtan Renaudeau.
/*	 https://gist.github.com/gre/1650294
/*
/*	 Infinite loop bugs in iOS and Chrome (when zoomed) by Alex Guzman.
/*	 https://github.com/alexguzman
/*
/*	 Influenced by Chris Ferdinandi
/*	 https://github.com/cferdinandi
/*
/*
/*	 Free to use under the MIT License.
/*
/* ============================================================= */

(function() {
    'use strict';

    var module = angular.module('smoothScroll', []);

    var resolveOffset = function(offset, element, options) {
        if (typeof offset == 'function') offset = offset(element, options);

        if (angular.isElement(offset)) {
            var offsetEl = angular.element(offset)[0];

            if (typeof offset != 'undefined') offset = offsetEl.offsetHeight;
        }

        return offset;
    }

    // Smooth scrolls the window to the provided element.
    //
    var smoothScroll = function(element, options) {
        options = options || {};

        // Options
        var duration = options.duration || 800,
            offset = resolveOffset(options.offset || 0, element, options),
            easing = options.easing || 'easeInOutQuart',
            callbackBefore = options.callbackBefore || function() {},
            callbackAfter = options.callbackAfter || function() {};



        var getScrollLocation = function() {
            return window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop;
        };

        setTimeout(function() {
            var startLocation = getScrollLocation(),
                timeLapsed = 0,
                percentage, position;

            // Calculate the easing...