Come fare per ..

Inserire pulsanti per lo scorrimento in cima e in fondo alla pagina

Ho una pagina molto lunga, come faccio a mettere due pulsanti per raggiungere immediatamente con un click il fondo o la cima della pagina?

Di soluzioni ne esistono tante, e nessuna è migliore delle altre.
Ne proponiamo una, che si può realizzare con poche righe di codice e senza particolari capriole in javascript.

Inseriremo i nostri pulsanti in un <DIV>, che fisseremo nell'angolino in basso a destra.
Il DIV è identificato dall'id "idAncora" a cui daremo gli attributi CSS di posizionamento.
Per i pulsanti utilizziamo le classi di Bootstrap btn btn-primary per renderli di colore azzurro, a cui aggiungiamo in cascata uno stile nostro, chiamato gotop, per personalizzarli un po'.
Il simbolino da mostrare nel pulsante è un carattere di FontAwesome 4.7, per cui andiamo ad utilizzare il tag <i>...</i> per inserirlo e le classi fa fa-chevron-up o fa fa-chevron-down per selezionarlo.

Rimane il comando Javascript da applicare al click sul pulsante, e qui utilizziamo la funzione javascript scrollTo() che scorre la pagina fino alle coordinate indicate.
Per salire in cima si usa: onClick="window.scrollTo(0, 0);"
Per scendere in fondo, visto che non conosciamo la dimensione verticale della finestra, facciamo calcolare al browser l'altezza del documento: onClick="window.scrollTo(0, document.body.scrollHeight);"
Questo di seguito è il codice da inserire nelle nostre pagine:

[IMPORT] <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fontawesome.com/v4.7.0/font-awesome-4.7/css/font-awesome.min.css">

[HTML] <div id="idAncora">    <button class="btn btn-primary gotop onClick="window.scrollTo(0, 0);">       <i class="fa fa-chevron-up"></i>    </button>    <button class="btn btn-primary gotop onClick="window.scrollTo(0,document.body.scrollHeight);">       <i class="fa fa-chevron-down"></i>    </button> </div>

[CSS] #idAncora {    position: fixed;    right: 8px;    bottom: 8px; } .gotop {    border-radius: 4px;    padding: 3px 8px 3px 8px ;    color: #fff; }

Questa soluzione fa uso di Bootstrap e FontAwesome per rendere più gradevoli i pulsantini, ma si può realizzare anche con dei pulsanti semplici o con una immaginina o addrittura con del semplice testo.
Abbiamo messo il puntamento diretto alle librerie css di Bootstrap e FontAwesome sui rispettivi siti, ma è bene cercare di non utilizzare mai risorse residenti su sistemi che non possiamo controllare, perché se ce li eliminano o ce li cambiano dovremo adattare il nostro codice in tutte le pagine in cui le utilizziamo.
È consigliabile invece sempre copiare nel proprio sistema le librerie utilizzate.
Questa pagina contiene un utilizzo dei pulsanti, con gli attributi che abbiamo impostato.