vanilla-back-to-top-custom
Version:
Simple and tiny Back To Top button with no dependencies. Hides when on top, scrolls up smoothly when clicked. Works equally great with Vue, React, Angular and without frameworks on Jekyll, Hugo and Hexo
1 lines • 2.43 kB
JavaScript
;function addBackToTop(){var o,t,e,n,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=i.backgroundColor,d=void 0===r?"#000":r,c=i.cornerOffset,a=void 0===c?20:c,s=i.diameter,l=void 0===s?56:s,u=i.ease,m=void 0===u?function(o){return.5*(1-Math.cos(Math.PI*o))}:u,p=i.id,v=void 0===p?"back-to-top":p,h=i.innerHTML,f=void 0===h?'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>':h,b=i.onClickScrollTo,w=void 0===b?0:b,x=i.scrollContainer,g=void 0===x?document.body:x,k=i.scrollDuration,y=void 0===k?100:k,T=i.showWhenScrollTopIs,M=void 0===T?1:T,E=i.size,z=void 0===E?l:E,C=i.textColor,L=void 0===C?"#fff":C,N=i.zIndex,I=void 0===N?1:N,A=i.className,B=void 0===A?"":A,D=g===document.body,H=D&&document.documentElement;o=Math.round(.43*z),t=Math.round(.29*z),e="#"+v+"{background:"+d+";-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:"+a+"px;color:"+L+";cursor:pointer;display:block;height:"+z+"px;opacity:1;outline:0;position:fixed;right:"+a+"px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:"+z+"px;z-index:"+I+"}#"+v+" svg{display:block;fill:currentColor;height:"+o+"px;margin:"+t+"px auto 0;width:"+o+"px}#"+v+".hidden{bottom:-"+z+"px;opacity:0}",(n=document.createElement("style")).appendChild(document.createTextNode(e)),document.head.insertAdjacentElement("afterbegin",n);var S=function(){var o=document.createElement("div");return o.id=v,o.className="hidden ".concat(B).trim(),o.innerHTML=f,o.addEventListener("click",function(o){o.preventDefault(),function(){var o="function"==typeof w?w():w,t=window,e=t.performance,n=t.requestAnimationFrame;if(y<=0||void 0===e||void 0===n)return O(o);var i=e.now(),r=F(),d=r-o;n(function o(t){var e=Math.min((t-i)/y,1);O(r-Math.round(m(e)*d)),e<1&&n(o)})}()}),document.body.appendChild(o),o}(),j=!0;function q(){F()>=M?function(){if(!j)return;S.className=B,j=!1}():function(){if(j)return;S.className="".concat(B," hidden").trim(),j=!0}()}function F(){return g.scrollTop||H&&document.documentElement.scrollTop||0}function O(o){g.scrollTop=o,H&&(document.documentElement.scrollTop=o)}(D?window:g).addEventListener("scroll",q),q()}