Cum sa nu afisezi butonul backToTop
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:
Cod PHP:
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 :D !
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:
Cod PHP:
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
Cod PHP:
$('#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.
