L'hai già visto prima, fai clic su un link nella navigazione e ti porta non a un'altra pagina ma a un punto specifico all'interno della pagina corrente. Come è stato realizzato? Con alcuni HTML di base che puoi raccogliere in pochi secondi!
Per andare oltre, vedremo anche come animare la transizione usando un po 'di jQuery.
Collegamento interno: The Gist
Come ho spiegato nell'introduzione, oggi impareremo un trucco di base e poi vedremo come renderlo ancora migliore. Quando stavo studiando per la prima volta il web design, questa era una di quelle cose che mi dicevo sempre che dovevo capire, ma rimandare sempre l'apprendimento, se sei sulla stessa barca, questo articolo è per te.
Dimostrazione dal vivo: Clicca qui
Un racconto di due collegamenti
Come puoi probabilmente intuire, il collegamento a una sezione interna della tua pagina richiede non uno, ma due link. Innanzitutto, vuoi aggiungere il link che servirà da ancoraggio per scorrere, quindi creerai il link cliccabile standard come faresti normalmente e indirizzalo al primo link. Ha senso? Se no, non ti preoccupare, è più facile di quanto pensi.
Per la prima parte, diciamo che stiamo mettendo un link in un footer che scorrerà verso l'alto della pagina, una pratica comune su pagine più lunghe. Per inserire questo link, usiamo alcune sintassi che potresti avere o non avere familiarità con:
Si noti che invece del tipico? A href ?, abbiamo usato? Un nome ?. Questo è importante ed è un punto probabile per essere inciampato se sei abituato a inserire collegamenti con il primo. Puoi scegliere tutto quello che vuoi per il nome, ma ricorda che è meglio usare qualcosa di descrittivo come quello che abbiamo fatto qui. Inoltre, assicurati di prendere nota del nome che utilizzi, perché dovremo fare nuovamente riferimento al passaggio successivo.
Una volta che tutto il collegamento è pronto, è ora di inserire l'ancora. In sostanza, se si desidera scorrere fino a un punto specifico in una pagina, è necessario inserire un po 'di codice in quel punto in modo che il collegamento appena creato sappia dove andare.
Dal momento che vogliamo collegare alla parte superiore della pagina, inseriamo questo frammento nella parte superiore del nostro HTML.
Ci sono un paio di cose importanti da prendere in considerazione qui. Prima di tutto, abbiamo aggiunto un hashtag all'inizio del nome del link. Questo non appare nel primo link, ma è necessario nel secondo. Inoltre, la porzione di testo di questo link è stata lasciata vuota. Questo non è necessario, ma in realtà è un'opzione. Molto spesso probabilmente ti collegherai a un elemento già presente nel tuo layout in modo tale che ci sia del contenuto qui.
Costruire la demo
Ora che capisci la sintassi, è tempo di costruire una pagina web di base usando ciò che abbiamo imparato. Ovviamente, avremo bisogno di costruire una pagina abbastanza lunga da dover scorrere. A tal fine, iniziamo lanciando alcuni grandi blocchi di testo, ciascuno con il suo titolo.
I quattro titoli dovrebbero fornirci quattro potenziali posizioni da scorrere, quindi siamo perfettamente impostati! Da qui vogliamo aggiungere nei collegamenti nominati gli elementi di h1.
Avvio di CSS
Ora passiamo allo stile di base per questo testo. Tutto quello che ho davvero fatto è quello di disegnare i caratteri e aggiungere un po 'di margine a ciascuna sezione per estenderli in modo piacevole.
Ecco come appaiono i paragrafi risultanti. Super semplice ma faranno il lavoro per quello di cui abbiamo bisogno.
Immagine di navigazione e intestazione
Per navigare verso gli ancoraggi, abbiamo bisogno di creare una serie di link nel nostro html usando il metodo hashtag all'inizio di questo articolo. Inseriremo anche un'immagine segnaposto solo per darci un po 'più di spazio di scorrimento.
Demo finito: puro HTML / CSS
Con ciò, la demo del nostro link interno è completa! Fare clic su uno dei collegamenti nella navigazione e dovrebbero portarti a quel punto della pagina. Si noti che, per gli ancoraggi nella parte inferiore della pagina, lo scorrimento si riduce il più possibile.
Dimostrazione dal vivo: Clicca qui
Animare la pergamena
Con HTML, il collegamento di ancoraggio funziona, ma la transizione è piuttosto dura.Non c'è nessuna animazione, la pagina salta direttamente all'ancora dopo aver fatto clic. Cosa succede se vogliamo rendere questo un effetto più graduale in modo che l'utente possa vedere chiaramente che la pagina sta scorrendo verso il basso?
È possibile eseguire l'intera operazione di collegamento e scorrimento in JavaScript, ma ritengo che sia una cattiva idea semplicemente perché limiti inutilmente il numero di persone che possono utilizzare il tuo sito a quelli con JavaScript attivato. Invece, è molto meglio impostare il collegamento in HTML esattamente come abbiamo fatto qui e quindi aggiungere l'effetto di animazione per gli utenti JavaScript. Il sito funzionerà ancora per tutti quelli con JS disattivati, ma non vedranno l'animazione.
Per realizzare ciò, abbiamo bisogno di tre cose. Il primo è, naturalmente, jQuery perché è sorprendente e rende tutto più facile. Il secondo è un piccolo jQuery plugin estremamente pratico di Ariel Flesler chiamato ScrollTo e, infine, avrete bisogno di una propaggine di ScrollTo chiamata LocalScroll.
Sembra complicato ma è semplicissimo. LocalScroll è stato creato per il solo scopo di animare lo scrolling del link di ancoraggio, quindi è lo strumento perfetto per il lavoro. È anche la soluzione di gran lunga più semplice da implementare che sono riuscito a trovare! La prima cosa che devi fare è scaricare LocalScroll e inserirli insieme a jQuery nel tuo HTML (ScrollTo sarà incluso anche nel download).
Successivamente abbiamo bisogno di passare ad esso l'elemento genitore che contiene i collegamenti hashtag. Nel nostro caso il #nav div contiene i collegamenti, quindi lo inseriremo nel seguente frammento:
Tutto ciò che devi fare per implementarlo nei tuoi progetti è cambiare la destinazione e, se lo desideri, specificare una durata per l'animazione. Questo è tutto! Questo piccolo blocco di testo si prende cura dell'effetto di scorrimento animato per noi.
Demo terminato: animato con JavaScript
Ecco la seconda versione della nostra demo, questa volta con il lancio magico di JavaScript. Confrontala con la versione precedente per vedere quanto l'effetto si sente meglio con la transizione.
Dimostrazione dal vivo: Clicca qui
Conclusione
In chiusura, ricorda che il collegamento a un punto di scorrimento all'interno della pagina è facile con puro HTML. Tutto quello che devi fare è impostare un link con nome che è collegato a un punto specifico e un link cliccabile che ti porterà lì.
Dopodiché, se vuoi rendere la transizione più graduale, usa insieme jQuery e LocalScroll. Assicurati di specificare sia il contenitore principale per i tuoi link che la durata dell'animazione.