]> BookStack Code Mirror - bookstack/blob - resources/assets/js/components/back-top-top.js
Moved the code to the wysiwyg-editor file.
[bookstack] / resources / assets / js / components / back-top-top.js
1
2 class BackToTop {
3
4     constructor(elem) {
5         this.elem = elem;
6         this.targetElem = document.getElementById('header');
7         this.showing = false;
8         this.breakPoint = 1200;
9         this.elem.addEventListener('click', this.scrollToTop.bind(this));
10         window.addEventListener('scroll', this.onPageScroll.bind(this));
11     }
12
13     onPageScroll() {
14         let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
15         if (!this.showing && scrollTopPos > this.breakPoint) {
16             this.elem.style.display = 'block';
17             this.showing = true;
18             setTimeout(() => {
19                 this.elem.style.opacity = 0.4;
20             }, 1);
21         } else if (this.showing && scrollTopPos < this.breakPoint) {
22             this.elem.style.opacity = 0;
23             this.showing = false;
24             setTimeout(() => {
25                 this.elem.style.display = 'none';
26             }, 500);
27         }
28     }
29
30     scrollToTop() {
31         let targetTop = this.targetElem.getBoundingClientRect().top;
32         let scrollElem = document.documentElement.scrollTop ? document.documentElement : document.body;
33         let duration = 300;
34         let start = Date.now();
35         let scrollStart = this.targetElem.getBoundingClientRect().top;
36
37         function setPos() {
38             let percentComplete = (1-((Date.now() - start) / duration));
39             let target = Math.abs(percentComplete * scrollStart);
40             if (percentComplete > 0) {
41                 scrollElem.scrollTop = target;
42                 requestAnimationFrame(setPos.bind(this));
43             } else {
44                 scrollElem.scrollTop = targetTop;
45             }
46         }
47
48         requestAnimationFrame(setPos.bind(this));
49     }
50
51 }
52
53 module.exports = BackToTop;