Inserire un TORNA SU nel nostro sito

Torna su
Sono sempre più diffusi e comodi, specialmente nei templates commerciali, gli strumenti che ci consentono di tornare velocemente in cima alla pagina che stiamo leggendo. Nessuno dei tre ottimi template presenti di default in Joomla! contempla questa possibilità. Vediamo allora come rimediare.

La cosa è abbastanza semplice. Il principio è quello di inserire un'ancora nella pagina con un link di collegamento ad essa. Qui un articolo che parla delle ancore.

Ma vedremo anche come utilizzare plugin e moduli che oltretutto renderanno lo slittamento della pagina molto gradevole.

Come al solito utilizziamo il template rhuk_milkyway che troviamo di default nella nostra installazione di Joomla!
Apriamo con un editor di testo (notepad++ o PSPad) il file index.php del template e prendiamo nota dell'ID del primo tag della pagina web che sarà:


quindi scorriamo in fondo al file  e cerchiamo questa stringa:

torna su

e incolliamoci prima questa stringa:


Notate che come link ci mettiamo appunto l'ID del Tag che apre la pagina web page_bg, preceduto, cosa molto importante, dal simbolo cancelletto. Il risultato sarà che cliccando quel link torneremo istantaneamente in cima alla pagina che stiamo leggendo.
L'aspetto sulla pagina web sarà questo:



Naturalmente al posto di TORNA SU ci potete scrivere quello che volete,  ed anche potete linkare qualsiasi altro ID della index.php del vostro template. Ad esempio se inserite questo codice



al click non tornerete in cima alla pagina web ma finirete all'inizio della scritta breadcrumbs, evitando di mostrare l'header che se, al contrario del Rhuk fosse notevolmente alto, sarebbe inutile rimostrare ad ogni TORNA SU.

Ma potremmo voler ottenere il link TORNA SU con una piccola immagine che funga da pulsantino che ci sembra abbastanza intuitiva e molto diffusa proprio nei template professionali. La cosa è abbastanza semplice. Basta caricare l'immagine tua_immagine.gif nella cartella images del template e poi linkarla in questo modo:



Naturalmente se state lavorando su un template diverso dal rhuk_milkyway metterete al suo posto il nome del vostro template nella soprastante stringa.

La cosa potrebbe anche finire qui se non fosse che ci sono utenti allergici a metter mano al codice, anche nel modo molto semplice che abbiamo visto. Ecco che allora ci vengono in soccorso, come sempre, moduli e plugin che risolvono in modo eccellente la nostra necessità di usare il TORNA SU.
Ne ho provato e testato diversi e ve ne illustro qualcuno tra quelli che reputo migliori.

Iniziamo da questo: smoothsc

E' un ottimo plugin che consente di inserire con pochi clic il TORNA SU nel nostro sito. E' sviluppato da un italiano, Riccardo Budini, almeno a giudicare dal nome e dal suo sito personale.

Il plugin si trova qui:

http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/6742

ma al momento in cui scrivo presenta dei problemi oltre a non esser supportato con istruzioni in italiano, per cui l'ho un poco sistemato e tradotto e lo potete scaricare da qui.

Una volta scaricato come al solito lo installiamo cliccando su Estensioni e poi su Installa/disinstalla e infine su sfoglia e poi su Carica file & Installa.

La caratteristica peculiare di questo plugin e quella di rendere lo scorrimento della pagina con quel caratteristico effetto smooth di scorrimento con accelerazione e frenata al posto del trasferimento secco nella nuova posizione. Un effetto presente anche nel sito e nel forum di joomla.it, se ci fate caso.

torna suVediamo velocemente le impostazioni da fare.

Andiamo in Estensioni/Gestione plugin e clicchiamo sul plugin:
Smooth-Scroll for Joomla! rel. 0.8
Si aprirà una schermata come quella che vedete qui di fianco

Nel primo box inseriremo la parola o la frase che utilizzeremo per il link. Di default trovate scritto Torna su, ma potrete scrivere Vai su, Go Top, Top, eccetera.

Nel secondo box va inserito l'ID del DIV dove volete vada a puntare il link di cui sopra. Di default trovate scritto l'ID del template Rhuk Milkyway. Se usate un altro template scrivete l'ID di uno dei DIV in alto nella index.php del template stesso. Non può essere lasciato in bianco, pena il mancato funzionamento del Torna su.

Nel terzo box potete inserire una o più regole css relative al  link. Di default trovate inserita una stringa che inibisce eventuali sottolineature o altre modifiche del link al mouse-over. Potete anche cancellarla e lasciare in bianco.

Nel quarto box potete inserire una freccia rivolta verso l'alto di diverso stile e colore in una piccola gamma che però consente di intonarla con lo stile della maggioranza dei templates. Questa immagine si affiancherà alla scritta che avete inserito nel primo box. Se volete mostrare solo la freccia lasciate il primo box in bianco. Se invece non volte inserire la freccia lasciate questo box su Nessuna selezione.


Negli ultimi tre box potrete allineare e distanziare l'immagine dalla scritta con molta precisione.

Una volta che abbiamo completato le impostazioni potremo far apparire il link e l'immagine, solo il link o solo l'immagine, secondo le impostazioni fatte, semplicemente inserendo in fondo all'articolo questo codice:

{smooth-scroll-top}

TIP: questo plugin può però essere utilizzato anche per inserire normali ancore in giro per il testo di un articolo o direttamente nella index.php del template, o in un modulo di tipo html personalizzato inserendo il codice come avevamo visto all'inizio dell'articolo:



per il link e sostituendo la parola esempio con l'ID del DIV di ancoraggio. Se volete spostarvi all'interno di un articolo, ad esempio con un indice, basterà inserire le ancore come ID di un DIV.

Il plugin jb library

torna suVediamo adesso un  altro plugin davvero strepitoso. In realtà questo plugin serve a caricare una libreria jQuery nella head del template in uso. Ma consente anche un rapidissimo inserimento del Torna su nel vostro sito. Scaricate da qui il plugin jb library plugin ed installetelo nel solito modo.
Quindi andate in Estensioni/Gestione plugin e cliccate su System - JB Library. Se vi appare un avviso di errore voi limitatevi ad attivarlo salvandolo. Alla riapertura dovreste poter procedere con le impostazioni dove trovate già attivo di default lo Scroll to top button come vedete nell'immagine qui a destra. Avete la possibilità di decidere per lo sfondo scuro o chiaro e di modificare la scritta del link. Ecco che apparirà nel vostro sito nell'angolo inferiore destro il pulsantino per far scorrere all'insù le vostre pagine sempre con un gradevole effetto di slittamento e frenata. Se il plugin non funziona non accanitevi perchè jQuery può entrare in conflitto con mootools, altra libreria utilizzata da molte estensioni di Joomla!

Il modulo jgo to top

torna su
Vediamo adesso come realizzare il Torna su con la semplice installazione di un modulo. Si chiama jgo to top e si scarica da qui.

Lo installate e poi da gestione moduli cercate mod_jgototop15, lo aprite e sarà un gioco da ragazzi scrivere nella casella Text display in the link quello che vi pare e poi scegliere nel box sottostante l'allineamento desiderato.


Dovete poi pubblicare il modulo in una delle posizioni basse del vostro template. Nel rhuk la posizione footer si trova proprio sotto i contenuti.


Se ancora non vi bastano gli esempi di questo mio articolo potete andare nell'apposita sezione della directory di joomla.org e provarne altre.

Qui puoi vedere una demo dei plugin e moduli per il TORNA SU. Utile per vedere gli effetti di gradevole scorrimento, soprattutto per l'indice  e le ancore della pagina.

Articolo scritto da tonicopi - Joomla Css Zen Garden

commentaCommenta questo articolo sul forum