Inserire freccia di Scroll Up
Autore: Flaviano G.
Visite 2034,
Followers 2,
Condiviso 0
Buongiorno
sto' utilizzando Websitex5 professional 12, premetto non sono un esperto , utilizzo i siti per vendere i miei prodotti, vorrei inserire una freccia di Scroll Up, c'e qualche Widget o plugin disponibile ? Se possibile con soluzioni alla mia portata . Grazie Ciao a tutti
Postato il
Inserisci un immagine di una freccia in fondo alla pagina, con link alla stessa pagina....tutto senza codice....
Altrimenti potrestii usare quelli che trovi in rete free, in jquery, ed inserirli nel tuo sito....
Autore
Grazie Mirco provero' a seguire i tuoi consigli
io utilizzo questo se hai voglia di provarlo eccolo..... ciao Giancarlo.
Passo 4 Statistiche Seo e Codice ESPERTO tag Head:
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 15px;
text-decoration: none;
color: #000000;
background-color: rgba(35, 35, 35, 0.80);
font-size: 16px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: rgba(133, 133, 133, 133.50);
}
</style>
in Home e altre pag > propietà > espero > Prima della chiusura del tag BODY
<a href="#" class="back-to-top"><img src="img/cd-top-arrow.png"></a>
(INSERISCI IMMAGINE DELLA FRECCIA IN img/)
Home e altre pag. > propietà > esperto > Prima della chiusura del tag HEAD
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
in Home e altre pag > propietà > espero > Prima della chiusura del tag BODY
<a href="#" class="back-to-top"><img src="img/cd-top-arrow.png"></a> (INSERISCI IMMAGINE DELLA FRECCIA IN img/)
Home e altre pag. > propietà > esperto > Prima della chiusura del tag HEAD
<script> ................ </script>
perchè in home e altre pagine.....sempre al passo 4, stessi tag...e va già in automatico in tutte le pagine...
Grazie Mirko... volendo si ... ma io l'ho inserito solo nelle pagine dove ritenevo corretto attivarlo.... comunque anche come dici tu ...
Autore
Grazie tante Giancarlo
Autore
Ancora un'informazione per favore , praticamente cosa si intende per (INSERISCI IMMAGINE DELLA FRECCIA IN img/ ?
Grazie
Devi esportare un immagine tua nella cartella img e nominarla come sopra, oppure dare il nome della tua immagine nel percorso che ti ha indicato sopra....
Ciao Flaviano, se vuoi puoi usare questa che ti allego al post.
Ciao Giancarlo.
Autore
Grazie a tutti - Buona giornata
Autore
Scusate la mia ignoranza, ancora una cosa, dove si trova la cartella img ?
Poi devo inserire nella cartella il file della freccia o il file del contenuto zip ?
Grazie a tutti per la cortesia
la cartella img devi crearla oppure metti il file cd-top-arrow.png (solo il file non lo zippato) nella cartella files vedi tu pero devi cambiare il tag del percorso in:
<a href="#" class="back-to-top"><img src="files/cd-top-arrow.png"></a>
alla fine il risultato è come questo:
http://www.giancafoto.it/
Autore
Complimenti Giancarlo hai un sito molto bello ,
l'ho archiviato nei siti WS che seguo per imparare,
scusa ancora per la mia incompetenza, fisicamente la cartella img dove la creo ?
Grazie
grazie troppo gentile.. ti dico che ho molto da imparare pure io.. ma veniamo alla cartella intanto per valutare in preview con wsx5 dove hai il progetto cerca la cartella del progetto e poi inseriscila dentro la cartella preview vedi esempio allegato.
Ciao Giancarlo.
.... per curiosità, c'è anche il mio DIV_CUSTOM, semplicissimo, essenziale ed immediato, con un solo copia/incolla in pannello ESPERTO | Codice personalizzato | prima della chiusura del /BODY...
http://www.zspace.it/kolasim/div_custom/divcustomAngoloK_ToTop2.html
http://www.zspace.it/kolasim/div_custom/divcustomAngoloK_scrollToTop2.html
... Ctrl+U per vedere e copiare il codice in Chrome o Firefox in fondo al listato...
.
Buongiorno, ho provato anch'io ad inserire questa funzione funziona alla meraviglia per la versione desktop ma sul mobile si visualizza sotto le immagine ed non e cliccabile! perchè? potete aiutarmi , grazie.
link: http://www.minejoys.com/catalogo-sterling---ciondoli.html
Ciao Luigi.. deve andare anche sul mobile... infatti se provi sul mio sito è ok .... che versione hai di wsx5 ?
... il problema è anche nel desktop; ...assegnagli uno z-index superiore...
.
Ciao Giancarlo ho la versione 12 prof
Ciao, KolAsim grazie per la risposta, ma sul desk sembra funzionare bene.
Scusa la mia ignoranza in materia ma dove trovo questo parametro "z-index"
Grazie
non c'è Luigi dovresti provare ad inserirlo tu nella prima parte del codice es:
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 15px;
text-decoration: none;
color: #000000;
background-color: rgba(35, 35, 35, 0.80);
font-size: 16px;
padding: 1em;
display: none;
z-index:1;
}
.back-to-top:hover {
background-color: rgba(133, 133, 133, 133.50);
z-index:1;
}
</style>
ma dovrebbe funzionare anche senza lo z-index:1;
Ciao Giancarlo il valore "position" si deve inserire?
z-index:10;
position:relative;
... prova come indicato da Giancarlo, al limite ne innalzi il valore a 10 come hai proposto tu o anche superiore per esempio 10100...
... non devi aggiungere/cambiar altro...
.
Grazie a Giancarolo e KolAsim, siete stati risolutivi, innalzato il valore z-index funziona perfettamente.