Ritorna in cima alla pagina su template bootstrap

[giannino1995]

Mi consigliate una libreria che faccia comparire un pulsante sul fondo pagina per far risalire l'utente automaticamente su un template Bootstrap. Anche in jQuery va benissimo, se possibile non javascript puro, preferisco una libreria.

[giannino1995]

Ho risolto ma mi resta un problema con css.
chiudo

[ciro78]

Giannino sarebbe buona norma proporre la soluzione trovata.

Inoltre non puoi chiudere

lascio aperto ancora per farti postare la soluzione

[Marcolino's]

Visto che si parla del "classico" pulsante a scomparsa, propongo ciò che uso di frequente.
Spero serva, a chiunque, compreso Giannino che cerca un'intera libreria per sostituire due o tre righe di codice.

Il javascript:

$( window ).scroll( function() { 
  if( $( this ).scrollTop() != 0 ) { 
    $('#top').fadeIn(); 
  } else { 
    $('#top').fadeOut();
  }
});
$( '#top' ).click( function() {
   $('body, html').animate( {scrollTop:0}, 500 );
});

Che va applicato ad un semplice HTML:

<div id="top"><span class="fa fa-chevron-up"></span><span class="sr-only">Questo tasto riporta la pagina al top della finestra.</span></div>

Che si può (deve) formattare con un po' di CSS:

div#top{
    width:40px;
    height: 40px;
    line-height: 25px;
    border: 1px outset #114A70;
    border-radius: 4px;
    background-color: #7F7F80;
    text-align: center;
    padding: 5px;
    position: fixed;
    bottom: 10px;
    right: 15px;
    cursor: pointer;
    display: none;
    color: #333;
    z-index: 10000;
}
div#top:hover,
div#top:focus {
    background-color: #3B3B3E;
    color: #FFF;
}

Piccola spiegazione per chi non mastica certo codice:
Nel javascript allo scrolling dell'intera finestra attiva (window) viene subito controllato che non si sia arrivati al TOP della pagina (livello zero). se non è così, si attiva il tasto SU con una semplice animazione.
Si può anche dare show() al posto di fadeIn(), è questione di gusti.
Se invece (else) si è arrivati al TOP si attiva fadeOut() (o hide() se piace così), e si nasconde il tasto SU.
La seconda "funzione" si attiva facendo click sul tasto SU una volta attivo, che porta la pagina al TOP, ma con una piccola animazione che ne rallenta un poco lo scrolling.
Se non piace, mettere 0 (zero) al posto di 500 (mezzo secondo)

Il tutto funziona se si inserisce il codice HTML nella pagina, in un punto qualsiasi.
ID=top identifica l'elemento contenitore del tasto, a cui fa riferimento anche il javascript di cui sopra.
L'altro span è per non vedenti, infatti la classe Bootstrap sr-only, impedisce che quanto scritto tra lo span appaia a schermo.

Il foglio di stile, formatta lo HTML, mettendolo a destra e in basso dello schermo, lo colora, lo mette ad uno z-index abbastanza alto (modificare a piacere) e lo nasconde, verrà visualizzato automaticamente solo quando si "scrolla" la pagina.
Il resto è fuffa stilosa.

Buon divertimento, ciao.

Dentro uno span riporta un carattere, precisamente lo chevron up, simile a questo ^