back-to-top-es6.js

/**
 * Adds 'Back to top' functionality to an element with the ID 'back-to-top'
 * @example 
 * 1. Create a link-wrapper with ID 'back-to-top'
 * 2. Add an icon inside the link-wrapper such as an arrow
 * 3. Set position fixed: bottom right
 * 4. Set opacity to 0
 */

class BackToTop {

    constructor() {

        this.$backToTop = $('#back-to-top');
        this.toggleDistance = 50;

        if( this.$backToTop.length > 0 ){
            this.init();
        }
    }

    init() {
        window.onscroll = () => this.scrollFunction();
        this.$backToTop.on( 'click', () => this.scrollToTop() );
    }

    scrollFunction() {
        if (document.body.scrollTop > this.toggleDistance) {
            this.$backToTop.addClass('active');
        } else {
            this.$backToTop.removeClass('active');
        }
    }

    scrollToTop(){
        window.scrollTo(0, 0);
    }

}

export default BackToTop;