- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Far apparire le l'icona Back To Top in fondo al monitor
-
Far apparire le l'icona Back To Top in fondo al monitor
Ciao,
dovresti usare i CSS, qualcosa tipo questo (non provato, scritto al volo):.back-to-top { position: fixed; bottom: 30px; right: 30px; }
-
@Apthu said:
Non appare l'icona col tuo codice.
Questo è il css
>.back-to-top a { background-color:rgba(204,204,204,0.70); font-size: 2em; } .back-to-top a:hover { background-color:rgba(119,119,119,0.70); color: #fff !important; } >``` Perdonami, tu hai chiesto il codice per far apparire l'oggetto *«in fondo alla home indipendentemente dalla misura del monitor»* e io ho dato per scontato che l'oggetto fosse già visibile, con i giusti colori, in una differente posizione. Questo tuo CSS modifica solo i colori e la grandezza del carattere, non la posizione.
-
@Apthu said:
Si, come lo devo mettere?
Poi ho impostato 3000 al jQuery ```
if (jQuery(this).scrollTop() > 3000) {In genere l'icona per lo scroll-to-top si trova in basso a destra, anche per evitare di coprire le scritte nel footer come avviene nella tua pagina albertifoto e si tende a farla apparire subito, appena si fa uno scroll anche di pochi pixel (> 10).
Il CSS che ho scritto prima dovrebbe, appunto, posizionare l'icona in basso a destra, a 30px di distanza dai bordi destro e inferiore, valore che puoi modificare a piacimento ovviamente.
-
@Apthu said:
Io ho cercato di mettere l'icona sotto quella della Apple nella colonna a sinistra, non ci sono riuscito.
Ma no, a mio parere l'icona dev'essere il più possibile separata dagli altri contenuti, altrimenti è invisibile e invece dev'essere subito notata per agevolare lo scroll a inizio pagina, soprattutto sui cellulari.
Nel tuo caso ho fatto la prova con questi valori e mi sembrano ottimali:
.back-to-top { position: fixed; bottom: 50px; right: 30px; }
Inoltre, sempre a mio parere, mi pare che l'icona appaia troppo tardi. Costringere il visitatore ad arrivare quasi in fondo prima di poter beneficiare dello scroll-to-top, magari per tornare a cliccare sul menu visto che non è fisso (cioè sempre visibile), mi sembra una "tortura" inutile.
-
@altraSoluzione said:
Nel tuo caso ho fatto la prova con questi valori e mi sembrano ottimali:
> .back-to-top { position: fixed; bottom: 50px; right: 30px; } >``` Ciao, sono anche io d'accordo sulla posizione separata dagli altri contenuti, in basso a destra è la posizione ideale. Nel tuo CSS aggiungerei solo z-index per sicurezza, il livello 9 dovrebbe essere più che sufficiente
.back-to-top {
position: fixed;
bottom: 50px;
right: 30px;
z-index: 9;
}