BookStack Code Mirror - bookstack/blob - resources/js/components/back-to-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
  10         if (document.body.classList.contains('flexbox')) {
  11             this.elem.style.display = 'none';
  12             return;
  13         }
  14
  15         this.elem.addEventListener('click', this.scrollToTop.bind(this));
  16         window.addEventListener('scroll', this.onPageScroll.bind(this));
  17     }
  18
  19     onPageScroll() {
  20         let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
  21         if (!this.showing && scrollTopPos > this.breakPoint) {
  22             this.elem.style.display = 'block';
  23             this.showing = true;
  24             setTimeout(() => {
  25                 this.elem.style.opacity = 0.4;
  26             }, 1);
  27         } else if (this.showing && scrollTopPos < this.breakPoint) {
  28             this.elem.style.opacity = 0;
  29             this.showing = false;
  30             setTimeout(() => {
  31                 this.elem.style.display = 'none';
  32             }, 500);
  33         }
  34     }
  35
  36     scrollToTop() {
  37         let targetTop = this.targetElem.getBoundingClientRect().top;
  38         let scrollElem = document.documentElement.scrollTop ? document.documentElement : document.body;
  39         let duration = 300;
  40         let start = Date.now();
  41         let scrollStart = this.targetElem.getBoundingClientRect().top;
  42
  43         function setPos() {
  44             let percentComplete = (1-((Date.now() - start) / duration));
  45             let target = Math.abs(percentComplete * scrollStart);
  46             if (percentComplete > 0) {
  47                 scrollElem.scrollTop = target;
  48                 requestAnimationFrame(setPos.bind(this));
  49             } else {
  50                 scrollElem.scrollTop = targetTop;
  51             }
  52         }
  53
  54         requestAnimationFrame(setPos.bind(this));
  55     }
  56
  57 }
  58
  59 export default BackToTop;