Smooth Scrolling (Pure JS)

by Cam Gould

HTML

<nav data-scroll-header>
			<a data-scroll href="#Home">Home</a>
			<a data-scroll href="#About">About</a>
			<a data-scroll href="#Services">Services</a>
			<a data-scroll href="#Contact">Contact</a>
		</nav>
        
        <main>
            <section id="Home">
                <div>
                    <h1>Home</h1>
                </div>
            </section>
            
            <section id="About">
                <div>
                    <h1>About</h1>
                </div>
            </section>
            <section id="Services">
                <div>
                    <h1>Services</h1>
                </div>
            </section>
            <section id="Contact">
                <div>
                    <h1>Contact</h1>
                </div>
            </section>
        </main>

<footer>
    <a data-scroll href="#About" class="down"></a>
</footer>

CSS

* { margin: 0; padding: 0; box-sizing: border-box; font-family: arial; text-decoration: none; color: black; }

nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 9999; }
nav a { color: white; display: inline-block; padding: 1rem; float: left; font-weight: bold; }

section#Home h1 { padding: 3.5rem 0 0; }
section { height: 100vh; }

nav a:nth-child( 3n + 1), main section:nth-child( 3n + 1) { background: rgb( 0, 180, 255 ); }
nav a:nth-child( 3n + 2), main section:nth-child( 3n + 2) { background: rgb( 255, 65, 180 ); }
nav a:nth-child( 3n + 3), main section:nth-child( 3n + 3) { background: rgb( 0, 255, 180 ); }
nav a:nth-child( 3n + 4), main section:nth-child( 3n + 4) { background: rgb( 217, 255, 0 ); }

/* div { position: relative; padding: 1rem; } */

/* footer { background: rgba(255, 255, 255, 0.4); height: 55px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 7777; }
.down { background: white; display: block; border-radius: 100px; width: 50px; height: 50px; position: fixed; bottom: 5%; right: 5%; z-index: 8888; }
.down::after { content: "▼"; position: relative; left: 15px; top: 15px; } */

JavaScript

// Smooth Scroll
!function(e,t){"function"==typeof define&&define.amd?define("smoothScroll",t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)}(window||this,function(e){"use strict";var t,n,o,r={},a=!!document.querySelector&&!!e.addEventListener,c={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},u=function(e,t,n){if("[object Object]"===Object.prototype.toString.call(e))for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.call(n,e[o],o,e);else for(var r=0,a=e.length;a>r;r++)t.call(n,e[r],r,e)},i=function(e,t){var n={};return u(e,function(t,o){n[o]=e[o]}),u(t,function(e,o){n[o]=t[o]}),n},l=function(e,t){for(var n=t.charAt(0);e&&e!==document;e=e.parentNode)if("."===n){if(e.classList.contains(t.substr(1)))return e}else if("#"===n){if(e.id===t.substr(1))return e}else if("["===n&&e.hasAttribute(t.substr(1,t.length-2)))return e;return!1},s=function(e){return Math.max(e.scrollHeight,e.offsetHeight,e.clientHeight)},f=function(e){for(var t,n=String(e),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<o;){if(t=n.charCodeAt(r),0===t)throw new InvalidCharacterError("Invalid character: the input contains U+0000.");a+=t>=1&&31>=t||127==t||0===r&&t>=48&&57>=t||1===r&&t>=48&&57>=t&&45===c?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&57>=t||t>=65&&90>=t||t>=97&&122>=t?n.charAt(r):"\\"+n.charAt(r)}return a},d=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=.5>t?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=.5>t?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},h=function(e,t,n){var o=0;if(e.offsetParent)do...