Ancore e sticky bar... per kolasim 
Autore: Stefano L.Buongiorno KolAsim, rinnovo un anomalia che ho rinvenuto ora per uno script che risolveva la sovrapposizione della Sticky bar alle ancore, esempio qui:
1. apri questo link
2. clicca su una voce qualsiasi del sommario
3. noterai che le ancore non funzionano
4. ora clicca su una pagina qualunque del menù (es. Manuali)
5. vai nel Footer e clicca il link Spedizioni (che punta alla voce 10 del sommario nella pagina del punto 1 con /... #Art_10)
6. L'ancora funziona
7. se clicchi su qualsiasi voce del sommario l'ancora punta sempre alla voce 10...
comportamento strano....
questo lo script che ho caricato tramite Tag manager:
<script>
$(document).ready(function() {//K>;
/** Ancoraggio dinamico EXTRA con compensazione x terza pagina by KolAsim **/
secondiK = 3; // secondi di ritardo;
setTimeout(function(){ //K1>;
hK=$("#imStickyBar").height();
}, 1000);//K1<<;
//-------------------------------------
setTimeout(function(){ ritardoK(); }, secondiK * 750);//K2> | <<;
});//K<<;
//--------------------KK--------------
$( window ).on( "resize", function() {//KK>;
setTimeout(function(){ //K3>
hK=$("#imStickyBar").height();
}, 1000);//K3<<;
} );//KK<<;
//---------------------f K4-------------
function ritardoK() { //K4>;
rnpK = window.location.href.split('/');
ancoraK = rnpK[rnpK.length - 1];
if(ancoraK.indexOf("#") == - 1){ } //K5> | <<;
else {//K6>;
if(ancoraK.indexOf("#") != -1){//K7>;
location.href = ancoraK;
anchor_K();
}//K7<<;
}//K6<<;
} //K4<<;
//---------------------f K8-------------
function anchor_K() { //K8>
setTimeout(function(){ //K9>
hK=$("#imStickyBar").height();
scrollK=$(window).scrollTop();
scrollK=scrollK-hK;
$('html,body').animate({ //K10>;
scrollTop: scrollK
}, 250);//K10<<;
}, 750);//K9<<;
} //K8<<;
</script>
... prova con questa variante x div-#imCell_32:
<script>
$("document").ready(function() { //K>;
/** Ancoraggio dinamico x stessa pagina e da terza pagina by KolAsim **/
secondiK = 3; // secondi di ritardo; // va valutare;
objectK = "#imCell_32"; //selettore contenitore collegamenti alle ancore di pagina;
setTimeout(function() { //K1>;
$(objectK + " .imCssLink").click(function(){//K2>;
linkK = $(this).attr("href");
controlloK();
});//K2<<;
anchorK = window.location.hash;
x5engine.utils.location(anchorK, null, false);
controlloK();
},secondiK*1000);//K1<<;
}); //K<<;
//-------------- f K3 --------------
function controlloK(){//K3>;
hK=$("#imStickyBarContainer").height();
setTimeout(function(){ //K4>
scrollK=$(window).scrollTop();
scrollK=scrollK-hK;
$('html,body').animate({//K5
scrollTop: scrollK
}, 500);//K5<<
}, 500);//K4<<
};//K3<<;
</script>
.
ciao
.
Autore
Ciao Kol, in Tag Manager ho disabilitato il vecchio script e caricato il tuo nuovo:
all'interno della pagina condizioni di vendita cliccando le voci del sommario tutto funziona, mentre se clicco il link "Spedizioni" nel footer non funziona...
fa anche una strano comportamento sulle altre ancore all'interno del sito... esempio se clicci il primo bottone "CALCULATOR" (sotto a ROAD) in questa pagina, la pagina scorre tutta in alto ma se poi clicchi nuovamente funziona... la stessa cosa la fa al primo click nella pagina delle condizioni di vendita...
Autore
ho dovuto toglierlo perchè appena facevi scroll con mouse la pagina continua a tornare su.....
... il precedente codice era riferito ad uno specifico selettore evidenziato...
... prova con questa variante che prende in carico tutti i collegamenti della pagina:
<script>
$("document").ready(function() { //K>;
/** Ancoraggio dinamico x stessa pagina e da terza pagina by KolAsim **/
secondiK = 3; // secondi di ritardo; // va valutare;
objectK = "body a";
setTimeout(function() { //K1>;
$(objectK).click(function(){//K2>;
linkK = $(this).attr("href");
controlloK();
});//K2<<;
anchorK = window.location.hash;
x5engine.utils.location(anchorK, null, false);
controlloK();
},secondiK*1000);//K1<<;
}); //K<<;
//-------------- f K3 --------------
function controlloK(){//K3>;
hK=$("#imStickyBarContainer").height();
setTimeout(function(){ //K4>
scrollK=$(window).scrollTop();
scrollK=scrollK-hK;
$('html,body').animate({//K5
scrollTop: scrollK
}, 500);//K5<<
}, 500);//K4<<
};//K3<<;
</script>
.
Autore
ok...stai in linea...
Autore
sembra che funzioni ma al caricamento di ogni pagina, sembra che al momento che scrolli, riavvolga la pagina all'inizio... prova a vedere se lo riscontri anche tu...
Autore
......ora l'ho tolto, confermo che a ogni pagina caricata si riavvolge in alto...
... non ho potuto valutare, ma penso dipenda dal ritardo del calcolo di 3 secondi sul caricamento/latenza della pagina come indicato:
secondiK = 3; // secondi di ritardo; // va valutare;
... fai le prove impostando 0 oppure 1, per es.:
secondiK = 0;
... altrimenti bisognerebbe inibire lo scroll anticipato con il mio preload come quello che usi in cartsearch...
.
Autore
Posso prepararlo e se mi fai un fischio alle 11:45 te lo pubblico online...
... OK ... salvo imprevisti penso di esserci ...
Autore
è online... ho messo 0 ed è migliorato un pochino.. riavvolge sempre comunque ...
Autore
uhmmmm... in modalità test di tag manager sembra faccia ancora il difetto.. online sembra che sia a posto... percepito poco...
... ho controllato, non vedo il codice nel sorgente, ma mi pare OK...
... il riavvolgimento non l'ho notato, ma nel caso potrebbe dipendere dal rilevamento delle ancore...
.
Autore
il codice sorgente forse non lo vedi perchè è gestito con google tag manager?
... non so cosa sia ...
Autore
é un servizio di google che ti permette di gestire tutti gli script del sito dall'esterno e non inserendoli come oggetti nelle pagine di WS5... sembra funzioni... tengo sott'occhio se presenta anomalie..
... grazie, buono a sapersi ...
... prova; ... con questa piccola modifica in (//K3> | //K3<<) dovrebbe fare lo scroll solo per ancore da terza pagina:
<script>
$("document").ready(function() { //K>;
/** Ancoraggio dinamico x stessa pagina e da terza pagina by KolAsim **/
secondiK = 3; // secondi di ritardo; // va valutare;
objectK = "body a";
setTimeout(function() { //K1>;
$(objectK).click(function(){//K2>;
linkK = $(this).attr("href");
controlloK();
});//K2<<;
anchorK = window.location.hash;
if(anchorK.indexOf("#") != -1){//K3>;
x5engine.utils.location(anchorK, null, false);
controlloK();
}//K3<<;
},secondiK*1000);//K1<<;
}); //K<<;
//-------------- f K4 --------------
function controlloK(){//K4>;
hK=$("#imStickyBarContainer").height();
setTimeout(function(){ //K5>
scrollK=$(window).scrollTop();
scrollK=scrollK-hK;
$('html,body').animate({//K6
scrollTop: scrollK
}, 500);//K6<<
}, 500);//K5<<
};//K4<<;
</script>
...
... altrimenti mantieni il precedente...
.
Autore
è online... sembra sia perfetto... ho solo modificato
secondiK = 0; // secondi di ritardo; // va valutare;
e
}//K3<<;
},secondiK*750);//K1<<;
}); //K<<;
secondiK = 0; //
... OK.. va bene, ... ma il controllo successivo (//K1<<;) non andrebbe modificato, anche se sembra ininfluente...
Autore
riportato a 1000, ma comunque funziona...
Sempre grazie infinite per il tuo supporto!
... 0 x 1000 = 0 ... (non viene rilevato) ...
... prima non l'avevo visto; ...non si tratta di collegamento normale ma di evento associato ad un pulsante...
... nelle pagine con questo tipo di pulsante puoi provare con questo mio codice dedicato:
<script>
$("document").ready(function() { //K>;
/* -- offset Ancore da pulsanti by KolAsim --*/
secondiK = 3; // secondi di ritardo; // va valutare;
objectK2 = ".pricing__action";
setTimeout(function() { //K1>;
$(objectK2).click(function(){//K2>;
linkK = $(this).attr("onclick");
if(linkK.indexOf("#") !=-1){//K3>;
k = linkK.split("#").pop();
controlloK();
};//K3<<;
});//K2<<;
},secondiK*1000);//K1<<;
}); //K<<;
function controlloK(){//K4>;
setTimeout(function(){ //K5>
hK=$("#imStickyBarContainer").height();
scrollK=$(window).scrollTop();
scrollK=scrollK-hK;
$('html,body').animate({//K6
scrollTop: scrollK
}, 500);//K6<<
}, 500);//K5<<
};//K4<<;
</script>
.
Autore
FUNZIONA ALLA PERFEZIONE!