BookStack/resources/js/components/back-to-top.js

import {Component} from "./component";

export class BackToTop extends Component {

    setup() {
        this.button = this.$el;
        this.targetElem = document.getElementById('header');
        this.showing = false;
        this.breakPoint = 1200;

        if (document.body.classList.contains('flexbox')) {
            this.button.style.display = 'none';
            return;
        }

        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.button.style.display = 'block';
            this.showing = true;
            setTimeout(() => {
                this.button.style.opacity = 0.4;
            }, 1);
        } else if (this.showing && scrollTopPos < this.breakPoint) {
            this.button.style.opacity = 0;
            this.showing = false;
            setTimeout(() => {
                this.button.style.display = 'none';
            }, 500);
        }
    }

    scrollToTop() {
        let targetTop = this.targetElem.getBoundingClientRect().top;
        let scrollElem = document.documentElement.scrollTop ? document.documentElement : document.body;
        let duration = 300;
        let start = Date.now();
        let scrollStart = this.targetElem.getBoundingClientRect().top;

        function setPos() {
            let percentComplete = (1-((Date.now() - start) / duration));
            let target = Math.abs(percentComplete * scrollStart);
            if (percentComplete > 0) {
                scrollElem.scrollTop = target;
                requestAnimationFrame(setPos.bind(this));
            } else {
                scrollElem.scrollTop = targetTop;
            }
        }

        requestAnimationFrame(setPos.bind(this));
    }

}

export default BackToTop;