WebSite X5Help Center

 
Flaviano G.
Flaviano G.
User

Inserire freccia di Scroll Up  it

Autore: Flaviano G.
Visite 1853, 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
26 RISPOSTE - 2 UTILI - 1 CORRETTO
Mirko Boschetti
Mirko Boschetti
Moderator

Inserisci un immagine di una freccia in fondo alla pagina, con link alla stessa pagina....tutto senza codice....

Leggi di più
Postato il da Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

Altrimenti potrestii usare quelli che trovi in rete free, in jquery, ed inserirli nel tuo sito....

Leggi di più
Postato il da Mirko Boschetti
Flaviano G.
Flaviano G.
User
Autore

Grazie Mirco provero' a seguire i tuoi consigli 

Leggi di più
Postato il da Flaviano G.
Giancarlo B.
Giancarlo B.
User
Utente del mese IT

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>

Leggi di più
Postato il da Giancarlo B.
Mirko Boschetti
Mirko Boschetti
Moderator
Giancarlo B.

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...

Leggi di più
Postato il da Mirko Boschetti
Giancarlo B.
Giancarlo B.
User
Utente del mese IT

Grazie Mirko... volendo si ... ma io l'ho inserito solo nelle pagine dove ritenevo corretto attivarlo.... comunque anche come dici tu ...

Leggi di più
Postato il da Giancarlo B.
Flaviano G.
Flaviano G.
User
Autore

Grazie tante Giancarlo

Leggi di più
Postato il da Flaviano G.
Flaviano G.
Flaviano G.
User
Autore

Ancora un'informazione per favore , praticamente cosa si intende per (INSERISCI IMMAGINE DELLA FRECCIA IN img/  ?

Grazie

Leggi di più
Postato il da Flaviano G.
Mirko Boschetti
Mirko Boschetti
Moderator

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....

Leggi di più
Postato il da Mirko Boschetti
Giancarlo B.
Giancarlo B.
User
Utente del mese IT

Ciao Flaviano, se vuoi puoi usare questa che ti allego al post.

Ciao Giancarlo.

Leggi di più
Postato il da Giancarlo B.
Flaviano G.
Flaviano G.
User
Autore

Grazie a tutti - Buona giornata

Leggi di più
Postato il da Flaviano G.
Flaviano G.
Flaviano G.
User
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

Leggi di più
Postato il da Flaviano G.
Giancarlo B.
Giancarlo B.
User
Utente del mese IT

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>

Leggi di più
Postato il da Giancarlo B.
Flaviano G.
Flaviano G.
User
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

Leggi di più
Postato il da Flaviano G.
Giancarlo B.
Giancarlo B.
User
Utente del mese IT

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.

Leggi di più
Postato il da Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

.... 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...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Luigi F.
Luigi F.
User

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

Leggi di più
Postato il da Luigi F.
Giancarlo B.
Giancarlo B.
User
Utente del mese IT

Ciao Luigi.. deve andare anche sul mobile... infatti se provi sul mio sito è ok .... che versione hai di wsx5 ?

Leggi di più
Postato il da Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Luigi F.
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.

... il problema è anche nel desktop; ...assegnagli uno z-index superiore...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Luigi F.
Luigi F.
User

Ciao Giancarlo ho la versione 12 prof

Leggi di più
Postato il da Luigi F.
Luigi F.
Luigi F.
User

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

Leggi di più
Postato il da Luigi F.
Giancarlo B.
Giancarlo B.
User
Utente del mese IT

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;

Leggi di più
Postato il da Giancarlo B.
Luigi F.
Luigi F.
User

Ciao Giancarlo il valore "position" si deve inserire?

z-index:10;   

position:relative;

Leggi di più
Postato il da Luigi F.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Luigi F.
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

... 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...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Luigi F.
Luigi F.
User

Grazie a Giancarolo e KolAsim, siete stati risolutivi, innalzato il valore z-index funziona perfettamente.

Leggi di più
Postato il da Luigi F.