• Far apparire le l'icona Back To Top in fondo al monitor

    Ho questo codice che funziona, ma fa apparire l'icona a circa metà schermo, mentre scorro la home verso il basso.
    Io vorrei che apparisse in fondo alla home indipendentemente dalla misura del monitor.
    https://albertifoto.altervista.org

    jQuery(document).ready(function(){
        // hide #back-top first
        jQuery(".back-to-top").hide();
        // fade in
        jQuery(function () {
            jQuery(window).scroll(function () {
                if (jQuery(this).scrollTop() > 3000) {
                    jQuery('.back-to-top').fadeIn();
                } else {
                    jQuery('.back-to-top').fadeOut();
                }
            });
            // scroll body to 0px on click
            jQuery('.back-to-top a').click(function () {
                jQuery('body,html,header').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });
    });
    
    

  • User Attivo

    Ciao,
    dovresti usare i CSS, qualcosa tipo questo (non provato, scritto al volo):

    
    .back-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
    }
    
    

  • 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;
    }
    
    
    
    

  • User Attivo

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

  • Si, come lo devo mettere?
    Poi ho impostato 3000 al jQuery ```
    if (jQuery(this).scrollTop() > 3000) {


  • User Attivo

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


  • Io ho cercato di mettere l'icona sotto quella della Apple nella colonna a sinistra, non ci sono riuscito.


  • User Attivo

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


  • User Attivo

    @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;
    }


  • Ne ho un altro di link Salta gli articoli nel responsive che fa scrollare fino sotto le immagini. Appare solo se riduci il monitor.


  • User Newbie

    Ho provato a mettere l'icona sotto l'icona Apple nella colonna di sinistra, ma non ci sono riuscito. .