Cum sa nu afisezi butonul backToTop

[Andretti]

Recent am avut de-a face cu o tema pentru Prestashop cumparata de la leothemes . com si pentru ca am vrut sa afisez un buton pentru chat langa butonul #backToTop am zis sa folosesc acelasi event.

Functia cu pricina din global.js arata cam asa:

function backtotop() {
    // hide #backtop first
    $("#backtop").hide();

    // fade in #backtop
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#backtop').fadeIn();
            } else {
                $('#backtop').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#backtop a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
} 

NU faceti asta... kill it with fire !
De ce nu ?
Manipulare inutila a unui element din DOM, in cazul nostru butonului cu id-ul #backtop ii este adaugat atributul style si este afisat sau ascuns(in functie de marginea de sus fata de pragul de 100px setat) cu display: inline/inline-block/block respectiv display: none .
Practic butonul este afisat sau ascuns de cateva zeci, sute sau mii de ori in functie de inaltimea paginii si de cat se scroleaza. Astfel browser este ingreunat, scroll-ul nu e lin si mai mult decat atat, scroll event functioneaza si cand se face swipe pe mobil sacadarea fiind si mai accentuata.

Am inlocuit functia cu asta:

function backtotop() {
        let state = false,
            bt = document.getElementById('backtop');
        window.onscroll = function () {
            let sy = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

            // console.log(sy, ' state este ', state);
            if (!state) {
                if (sy > 500) {
                    // console.log('afisez buton');
                    bt.style.cssText = 'display:block';
                    state = true;
                }
                return;
            }
            if (sy < 500) {
                // console.log('ascund buton');
                bt.style.cssText = 'display:none';
                state = false;
            }
        }
    } 

Da, vanilla pentru o sarcina atat de simpla . Puteti include si

$('#backtop a').click(function () { } 

in functia backtotop().
Tema a fost una din cele gratuite si nu una "premium" care ar fi costat intre 68 si 100$ si ar fi inclus acelasi global.js cu aceleasi functii, dar nu cred ca pretul e important ci atentia acordata si timpul investit in crearea temelor.