vanilla-back-to-top - npm Package Compare versions

Comparing version 5.0.4 to 6.0.0

dist/vanilla-back-to-top.min.js

@@ -1,1 +0,1 @@
-function addBackToTop(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=o.id,n=void 0===t?"back-to-top":t,e=o.scrollContainer,c=void 0===e?document.documentElement:e,a=o.showWhenScrollTopIs,i=void 0===a?1:a,d=o.onClickScrollTo,r=void 0===d?0:d,l=o.scrollDuration,s=void 0===l?100:l,p=o.innerElement,m=void 0===p?document.createTextNode("^"):p,u=o.size,f=void 0===u?56:u,x=o.cornerOffset,b=void 0===x?20:x,h=o.backgroundColor,v=void 0===h?"#000":h,g=o.textColor,y=void 0===g?"#fff":g,w=o.zIndex,k=void 0===w?1:w;!function(){var o=Math.round(.64*f),t=Math.round(1.28*f),e="#".concat(n,"{bottom:").concat(b,"px;opacity:1;position:fixed;right:").concat(b,"px;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;z-index:").concat(k,"}#").concat(n,".hidden{bottom:-").concat(f,"px;opacity:0}#").concat(n," a{background:").concat(v,";-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-webkit-border-radius:").concat(f,"px;-moz-border-radius:").concat(f,"px;border-radius:").concat(f,"px;color:").concat(y,";cursor:pointer;display:block;font-family:monospace;font-size:").concat(o,"px;height:").concat(f,"px;line-height:").concat(t,"px;text-align:center;text-decoration:none;vertical-align:middle;width:").concat(f,"px}"),c=document.createElement("style");c.appendChild(document.createTextNode(e)),document.head.insertAdjacentElement("afterbegin",c)}();var T=function(){var o=document.createElement("div");o.id=n,o.className="hidden";var t=document.createElement("a");return t.addEventListener("click",function(o){o.preventDefault(),function(){(s<=0||"undefined"==typeof performance||"undefined"==typeof requestAnimationFrame)&&(c.scrollTop=r);var o=performance.now(),t=c.scrollTop,n=t-r;requestAnimationFrame(function e(a){var i=a-o,d=Math.min(i/s,1);c.scrollTop=t-Math.round(d*n),d<1&&requestAnimationFrame(e)})}()}),t.appendChild(m),o.appendChild(t),document.body.appendChild(o),o}(),E=!0;(c===document.documentElement?window:c).addEventListener("scroll",C),C();function C(){c.scrollTop>=i?function(){if(!E)return;T.className="",E=!1}():function(){if(E)return;T.className="hidden",E=!0}()}}
+function addBackToTop(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=o.id,e=void 0===t?"back-to-top":t,n=o.showWhenScrollTopIs,c=void 0===n?1:n,i=o.onClickScrollTo,r=void 0===i?0:i,a=o.scrollDuration,d=void 0===a?100:a,s=o.innerElement,l=void 0===s?document.createTextNode("^"):s,u=o.size,m=void 0===u?56:u,p=o.cornerOffset,f=void 0===p?20:p,b=o.backgroundColor,h=void 0===b?"#000":b,x=o.textColor,v=void 0===x?"#fff":x,w=o.zIndex,g=void 0===w?1:w;!function(){var o=Math.round(.43*m),t=Math.round(1.21*m),n="#".concat(e,"{background:").concat(h,";-webkit-border-radius:").concat(m,"px;-moz-border-radius:").concat(m,"px;border-radius:").concat(m,"px;bottom:").concat(f,"px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);color:").concat(v,';cursor:pointer;display:block;font-family:"Courier New",Courier,monospace;font-size:').concat(o,"px;height:").concat(m,"px;line-height:").concat(t,"px;opacity:1;outline:0;position:fixed;right:").concat(f,"px;-webkit-tap-highlight-color:transparent;text-align:center;text-decoration:none;-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;vertical-align:middle;width:").concat(m,"px;z-index:").concat(g,"}#").concat(e,".hidden{bottom:-").concat(m,"px;opacity:0}"),c=document.createElement("style");c.appendChild(document.createTextNode(n)),document.head.insertAdjacentElement("afterbegin",c)}();var y=function(){var o=document.createElement("div");return o.id=e,o.className="hidden",o.appendChild(l),o.addEventListener("click",function(o){o.preventDefault(),function(){if(d<=0||"undefined"==typeof performance||"undefined"==typeof requestAnimationFrame)return z(r);var o=performance.now(),t=E(),e=t-r;requestAnimationFrame(function n(c){var i=c-o,r=Math.min(i/d,1);z(t-Math.round(r*e)),r<1&&requestAnimationFrame(n)})}()}),document.body.appendChild(o),o}(),k=!0;window.addEventListener("scroll",T),T();function T(){E()>=c?function(){if(!k)return;y.className="",k=!1}():function(){if(k)return;y.className="hidden",k=!0}()}function E(){return window.scrollY||window.pageYOffset||document.body.scrollTop||document.documentElement&&document.documentElement.scrollTop||0}function z(o){document.body.scrollTop=document.documentElement.scrollTop=o}}

dist/vanilla-back-to-top.umd.js

@@ -18,4 +18,2 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
         id = _params$id === void 0 ? 'back-to-top' : _params$id,
-        _params$scrollContain = params.scrollContainer,
-        scrollContainer = _params$scrollContain === void 0 ? document.documentElement : _params$scrollContain,
         _params$showWhenScrol = params.showWhenScrollTopIs,
@@ -42,7 +40,7 @@ showWhenScrollTopIs = _params$showWhenScrol === void 0 ? 1 : _params$showWhenScrol,
     var hidden = true;
-    scrollEventTarget().addEventListener('scroll', adapt);
+    window.addEventListener('scroll', adapt);
     adapt();
 
     function adapt() {
-      scrollContainer.scrollTop >= showWhenScrollTopIs ? show() : hide();
+      getScrollTop() >= showWhenScrollTopIs ? show() : hide();
     }
@@ -68,6 +66,2 @@
 
-    function scrollEventTarget() {
-      return scrollContainer === document.documentElement ? window : scrollContainer;
-    }
-
     function appendElement() {
@@ -77,9 +71,7 @@ var upEl = document.createElement('div');
       upEl.className = 'hidden';
-      var upLinkEl = document.createElement('a');
-      upLinkEl.addEventListener('click', function (event) {
+      upEl.appendChild(innerElement);
+      upEl.addEventListener('click', function (event) {
         event.preventDefault();
         scrollUp();
       });
-      upLinkEl.appendChild(innerElement);
-      upEl.appendChild(upLinkEl);
       document.body.appendChild(upEl);
@@ -90,5 +82,5 @@ return upEl;
     function appendStyles() {
-      var fontSize = Math.round(0.64 * size);
-      var lineHeight = Math.round(1.28 * size);
-      var styles = "#".concat(id, "{bottom:").concat(cornerOffset, "px;opacity:1;position:fixed;right:").concat(cornerOffset, "px;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;z-index:").concat(zIndex, "}#").concat(id, ".hidden{bottom:-").concat(size, "px;opacity:0}#").concat(id, " a{background:").concat(backgroundColor, ";-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-webkit-border-radius:").concat(size, "px;-moz-border-radius:").concat(size, "px;border-radius:").concat(size, "px;color:").concat(textColor, ";cursor:pointer;display:block;font-family:monospace;font-size:").concat(fontSize, "px;height:").concat(size, "px;line-height:").concat(lineHeight, "px;text-align:center;text-decoration:none;vertical-align:middle;width:").concat(size, "px}");
+      var fontSize = Math.round(0.43 * size);
+      var lineHeight = Math.round(1.21 * size);
+      var styles = "#".concat(id, "{background:").concat(backgroundColor, ";-webkit-border-radius:").concat(size, "px;-moz-border-radius:").concat(size, "px;border-radius:").concat(size, "px;bottom:").concat(cornerOffset, "px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);color:").concat(textColor, ";cursor:pointer;display:block;font-family:\"Courier New\",Courier,monospace;font-size:").concat(fontSize, "px;height:").concat(size, "px;line-height:").concat(lineHeight, "px;opacity:1;outline:0;position:fixed;right:").concat(cornerOffset, "px;-webkit-tap-highlight-color:transparent;text-align:center;text-decoration:none;-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;vertical-align:middle;width:").concat(size, "px;z-index:").concat(zIndex, "}#").concat(id, ".hidden{bottom:-").concat(size, "px;opacity:0}");
       var styleEl = document.createElement('style');
@@ -101,7 +93,7 @@ styleEl.appendChild(document.createTextNode(styles));
       if (scrollDuration <= 0 || typeof performance === 'undefined' || typeof requestAnimationFrame === 'undefined') {
-        scrollContainer.scrollTop = onClickScrollTo;
+        return setScrollTop(onClickScrollTo);
       }
 
       var start = performance.now();
-      var initScrollTop = scrollContainer.scrollTop;
+      var initScrollTop = getScrollTop();
       var pxsToScrollBy = initScrollTop - onClickScrollTo;
@@ -113,3 +105,3 @@ requestAnimationFrame(step);
         var progress = Math.min(delta / scrollDuration, 1);
-        scrollContainer.scrollTop = initScrollTop - Math.round(progress * pxsToScrollBy);
+        setScrollTop(initScrollTop - Math.round(progress * pxsToScrollBy));
 
@@ -121,4 +113,12 @@ if (progress < 1) {
     }
+
+    function getScrollTop() {
+      return window.scrollY || window.pageYOffset || document.body.scrollTop || document.documentElement && document.documentElement.scrollTop || 0;
+    }
+
+    function setScrollTop(value) {
+      document.body.scrollTop = document.documentElement.scrollTop = value;
+    }
   } // FUNCTION END
 
 });

package.json

 {
   "name": "vanilla-back-to-top",
-  "version": "5.0.4",
+  "version": "6.0.0",
   "description": "Tiny and configurable Back To Top button with no dependencies",
@@ -5,0 +5,0 @@ "main": "dist/vanilla-back-to-top.umd.js",

README.md

@@ -24,9 +24,9 @@ # Vanilla Back To Top
 ```html
-<script src="https://unpkg.com/vanilla-back-to-top@5.0.4/dist/vanilla-back-to-top.min.js"></script>
+<script src="https://unpkg.com/vanilla-back-to-top@6.0.0/dist/vanilla-back-to-top.min.js"></script>
 <script>addBackToTop()</script>
 ```
 
-If you don't want to rely on [unpkg.com](https://unpkg.com/#/about), save [the file](https://unpkg.com/vanilla-back-to-top@5.0.4/dist/vanilla-back-to-top.min.js) to your project and serve it from your server:
+If you don't want to rely on [unpkg.com](https://unpkg.com/#/about), save [the file](https://unpkg.com/vanilla-back-to-top@6.0.0/dist/vanilla-back-to-top.min.js) to your project and serve it from your server:
 ```html
-<script src="/assets/vanilla-back-to-top.min.js.gz"></script>
+<script src="/assets/vanilla-back-to-top.min.js"></script>
 <script>addBackToTop()</script>
@@ -54,3 +54,3 @@ ```
 ```css
-#back-to-top a {
+#back-to-top {
   text-indent: -9999px;
@@ -102,12 +102,11 @@ background-image: url(back-to-top.png)
   id: 'back-to-top',
-  showWhenScrollTopIs: 1,
-  onClickScrollTo: 0,
-  scrollDuration: 100,
+  showWhenScrollTopIs: 1, // px
+  onClickScrollTo: 0, // px
+  scrollDuration: 100, // ms
   innerElement: document.createTextNode('^'),
-  size: 56,
-  cornerOffset: 20,
+  size: 56, // px
+  cornerOffset: 20, // px
   backgroundColor: '#000',
   textColor: '#fff',
-  zIndex: 1,
-  scrollContainer: document.documentElement
+  zIndex: 1
 })
@@ -128,4 +127,3 @@ ```
 |`zIndex`|z-index of the button|
-|`scrollContainer`|If only part of your website gets scrolled, e.g., when your sidebar never scrolls with content, put the scrolled DOM element here|
 
 ### [&#9733; Star me on GitHub](https://github.com/vfeskov/vanilla-back-to-top)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16098

increased by0.86%

Worsened metrics

Number of lines in readme file

126

decreased by-1.56%

No dependency changes