backtotop

backtotop.js

@@ -0,0 +1,31 @@
+(function() {
+  'use strict';
+
+  function trackScroll() {
+    var scrolled = window.pageYOffset;
+    var coords = document.documentElement.clientHeight;
+    console.log(coords,scrolled);
+
+    if (scrolled > coords) {
+      goTopBtn.classList.add('back_to_top-show');
+    }
+    if (scrolled < coords) {
+      goTopBtn.classList.remove('back_to_top-show');
+    }
+  }
+
+  function backToTop() {
+    if (window.pageYOffset > 0) {
+      window.scrollBy(0, -30);
+      setTimeout(backToTop, 0);
+    }
+  }
+
+  var goTopBtn = document.createElement("div");
+  goTopBtn.id = 'back_to_top';
+  goTopBtn.innerHTML = 'UP';
+  document.body.appendChild(goTopBtn);
+
+  window.addEventListener('scroll', trackScroll);
+  goTopBtn.addEventListener('click', backToTop);
+})();