X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/ddb7f33868ea499ab8f48a7062f145e8c0fbe02f..refs/pull/4099/head:/resources/js/components/back-to-top.js

diff --git a/resources/js/components/back-to-top.js b/resources/js/components/back-to-top.js
index a1d87f22e..4f0a46f00 100644
--- a/resources/js/components/back-to-top.js
+++ b/resources/js/components/back-to-top.js
@@ -1,34 +1,35 @@
+import {Component} from "./component";
 
-class BackToTop {
+export class BackToTop extends Component {
 
-    constructor(elem) {
-        this.elem = elem;
+    setup() {
+        this.button = this.$el;
         this.targetElem = document.getElementById('header');
         this.showing = false;
         this.breakPoint = 1200;
 
         if (document.body.classList.contains('flexbox')) {
-            this.elem.style.display = 'none';
+            this.button.style.display = 'none';
             return;
         }
 
-        this.elem.addEventListener('click', this.scrollToTop.bind(this));
+        this.button.addEventListener('click', this.scrollToTop.bind(this));
         window.addEventListener('scroll', this.onPageScroll.bind(this));
     }
 
     onPageScroll() {
         let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
         if (!this.showing && scrollTopPos > this.breakPoint) {
-            this.elem.style.display = 'block';
+            this.button.style.display = 'block';
             this.showing = true;
             setTimeout(() => {
-                this.elem.style.opacity = 0.4;
+                this.button.style.opacity = 0.4;
             }, 1);
         } else if (this.showing && scrollTopPos < this.breakPoint) {
-            this.elem.style.opacity = 0;
+            this.button.style.opacity = 0;
             this.showing = false;
             setTimeout(() => {
-                this.elem.style.display = 'none';
+                this.button.style.display = 'none';
             }, 500);
         }
     }
@@ -54,6 +55,4 @@ class BackToTop {
         requestAnimationFrame(setPos.bind(this));
     }
 
-}
-
-export default BackToTop;
\ No newline at end of file
+}
\ No newline at end of file