Una tale funzione come il pulsante "su" per il sito rende la risorsa Internet più conveniente per i suoi visitatori. Ti aiuta a spostarti facilmente da qualsiasi punto della pagina alla parte superiore della pagina. Questo è un must per i negozi online e i siti con articoli di grandi dimensioni che richiedono uno scorrimento lungo verso il basso.
A cosa serve
Al momento, la maggior parte dei siti non ha una funzione come un pulsante "su", e non c'è nulla di critico in questo. Ma il suo utilizzo può portare molti vantaggi sia per la risorsa Internet che per i suoi visitatori.
Vantaggio per i visitatori
Succede spesso quando la pagina di una risorsa Internet è molto carica di informazioni, quando un articolo informativo occupa molto spazio e devi scorrere la pagina verso il basso con la rotellina del mouse. Oltre a questo, alla fine dell'articolo potrebbero esserci molti commenti a riguardo.
Quando un visitatore legge un articolo, non c'è niente di noioso nello scorrere la pagina verso il basso, ma quando il testo è giunto al termine e devi risalire, inizia a diventare un po' noioso. La maggior parte delle persone sarà semplicemente troppo pigra per scorrere a lungo e chiuderà semplicemente il sito, invece di fare un' altra passeggiata nelle sue distese.
Usando il pulsantespostarsi istantaneamente nella parte superiore della pagina rende più conveniente trascorrere del tempo sul sito.
Vantaggio per la risorsa Internet
Gli aspetti positivi per la risorsa stessa provengono da fattori passati, poiché una navigazione più semplice del sito migliora i fattori comportamentali poiché tutti i visitatori saranno più attivi nelle loro azioni e si sposteranno ad altre pagine.
Quindi, questi fattori comportamentali influenzano l'atteggiamento di tutti i motori di ricerca nei confronti del sito e portano a un miglioramento della posizione nei risultati di ricerca.
Come creare da soli il pulsante "su" sul sito
Trattare ulteriormente. Puoi sempre creare tu stesso un pulsante di scorrimento verso l' alto per un sito su uno qualsiasi dei CMS seguendo alcuni semplici passaggi:
- creazione immagine;
- creazione di uno script;
- crea stile pulsante;
- aggiunta al sito.
Immagine del pulsante
Per aggiungere un pulsante "su" sul sito, devi prima creare l'icona stessa, una volta cliccato, l'utente si sposterà nella parte superiore della pagina. Per fare ciò, puoi utilizzare opzioni già pronte, tra le quali puoi sempre scegliere quella più adatta.
Per migliorare l'aspetto del pulsante, dobbiamo apportare alcuni miglioramenti, ovvero creare uno sprite che ci permetta di combinare immagini di sfondo basate su CSS, creando così un'animazione al di fuori di esse.
Per i lavori grafici, puoi usare qualsiasi editor. Ma l'opzione più conveniente sarebbe un servizio online. PIXLR, poiché non c'è niente da scaricare qui e puoi usarlo direttamente nel tuo browser.
Per iniziare, nella finestra dell'editor che appare, seleziona il campo "Carica immagine dal computer". Prendiamo come esempio l'immagine di un razzo.
Se le dimensioni dell'icona selezionata sono troppo grandi, sarà necessario effettuare una piccola regolazione della dimensione. Per fare ciò, vai al menu in alto e seleziona il campo "Modifica", e dopo "Trasformazione libera …"
Successivamente, accanto all'immagine vengono visualizzati dei marcatori speciali, spostandoli puoi modificare le dimensioni dell'immagine. Per mantenere le proporzioni, puoi usare il tasto Maiusc, tenendo premuto il quale devi spostare gli indicatori blu. Al termine di questi passaggi, si ottiene l'immagine di un razzo.
Il passaggio successivo consiste nel creare una copia del livello.
Ora devi spostare un po' in alto l'immagine del razzo dal nuovo livello. Per fare ciò, sarà conveniente utilizzare lo strumento sposta, che si trova nella seconda colonna del menu a sinistra, e la freccia su della tastiera.
Ora dobbiamo rendere l'immagine in alto in bianco e nero. Questo può essere fatto utilizzando la voce "Correzione" - "Tonalità / Saturazione" nel menu in alto. Per una desaturazione completa, il cursore Saturazione deve essere impostato su -100. Questa azione ti consentirà di creare un effetto in cui il pulsante "Su" cambierà da bianco e nero a colore quando ci passi sopra con il mouse.
Il tocco finale è la rimozione dello spazio extra attorno alle due immagini. Per fare ciò, seleziona la voce "Ritaglia" dal menu di sinistra eselezioniamo solo due razzi in un rettangolo. Per eseguire il ritaglio, premere il tasto Invio.
Il risultato è un'immagine in cui non c'è spazio libero extra. Dovrai annotare la larghezza e l' altezza dell'immagine risultante, poiché questi dati saranno utili nel passaggio successivo.
Per salvare è necessario cliccare su "File" - "Salva", dove nel paragrafo a sinistra "My Computer" scriviamo il nome dell'immagine (solo layout in inglese), selezionare il formato (in questo case, PNG) e fare clic sul pulsante "Sì".
File con lo script del pulsante "su"
Non è necessario scrivere uno script in questo caso. Sarà possibile utilizzare la versione pubblica, apportando alcune modifiche al codice finito.
Per fare ciò, devi scaricare qualsiasi editor di codice. L'opzione più popolare e anche gratuita è Notepad ++. Dopo averlo installato, devi copiare e incollare tutto questo codice:
| $(documento).ready(function(){ $(window).scroll(function() {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function() {$('body, html').animate({scrollTop: 0}, 400); restituisce false;}); }); |
Successivamente, fai clic nel menu in alto su "File" - "Salva con nome…", dopodiché salviamo il codice in formato.js. Successivamente, puoi utilizzare questo codice sul tuo sito caricando i file di script e le immagini su di esso utilizzando una connessione FTP.
Installa sul sito
Per impostare il pulsante di scorrimento verso l' alto per il sito, devi inserirlocodice del luogo richiesto. Devi inserirlo prima del tag.
Creazione di uno stile pulsante con CSS
Molto spesso, il pulsante "su" del sito si trova in basso ("piè di pagina").
Il seguente codice deve essere aggiunto al file style.css del sito:
|
/Pulsante Su/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/percorso immagine nativa/ width:39px;/ button larghezza/ altezza:96px;/50% altezza pulsante/ basso:5px;/imbottitura inferiore in posizione fissa/ sinistra:89%;/sposta a sinistra/ }.scrollTop:hover{ background-position:0 -108px; } /offset sfondo/" |
In questo caso, saranno necessari i dati relativi alla larghezza e all' altezza dell'immagine. Resta solo da inserire i dati ricevuti nel codice e il pulsante "su" per il sito sarà pronto! Cos' altro?
Pulsante su per il sito Wordpress
Per questo CMS, il pulsante "Su" può essere creato utilizzando i plugin, oltre che in modo indipendente.
Il metodo dei plug-in è il più comodo e facile da installare, poiché richiede solo di fare clic sul pulsante di installazione e configurare tutte le funzionalità nel menu dei plug-in.
La scelta di quest'ultimo va affrontata con cautela, poiché con essa sarà facile acquisire un virus sul sito. L'opzione più popolare e collaudata è un plug-in chiamato Scroll Back To Top. Puoi scaricarlo utilizzando la ricerca standard per i plugin di Wordpress.
Questa estensione hafunzionalità multiple e sarà molto facile personalizzare il pulsante "su" per un sito Wordpress. Non è necessario modificare affatto tutti i valori, è sufficiente configurare l'aspetto e la posizione del pulsante nella pagina del sito.
Come puoi vedere, impostare il pulsante su con i plugin è molto semplice. Ma c'è una sfumatura importante, che è che ogni plugin installato carica il CMS. Ciò può influire sulla velocità della risorsa Internet. Ecco perché la maggior parte dei proprietari di siti cerca di apportare tutte le modifiche direttamente nel codice e non con l'aiuto di estensioni di terze parti. Puoi creare un pulsante "su" per un sito HTML, che ridurrà al minimo le risorse consumate.
Prima di modificare tutti i file di sistema di Wordpress, è necessario eseguirne il backup. Quindi puoi seguire tutti i passaggi per creare il tuo pulsante, descritto sopra.
Pulsante "su" per Joomla
CMS Joomla supporta anche l'installazione di plugin, come Wordpress. La versione di maggior successo del pulsante "su" per un sito su Joomla 3 è un'estensione chiamata Top of the Page.
In questo CMS, qualsiasi plugin può essere installato tramite "Extension Manager". Per questo è necessario:
- scarica il plugin su Internet;
- fai clic sul pulsante "Sfoglia" nel gestore estensioni;
- seleziona archivio scaricato;
- fai clic su "Download" e installa.
Ora devi attivarlo nel "Gestione plug-in". Per questodevi andare in questa sezione, trovare il plugin e cambiarne lo stato in "abilitato".
Il passaggio successivo consiste nel configurare tutti i parametri dell'estensione utilizzando la stessa sezione in cui è necessario trovare i "Parametri di base" di questo plugin sul lato destro.
In cima alla pagina ha le seguenti funzionalità:
- Run in/ administrator - abilitando l'opzione non solo sulla risorsa Internet, ma anche nel pannello Joomla CMS stesso.
- Pulsante Reveal Position - quanti pixel l'utente deve riavvolgere per far apparire il pulsante su.
- Ometti testo pulsante - la presenza di testo sul pulsante.
- Sempre in cima: la pagina del sito verrà sempre visualizzata dall' alto. Quando si utilizzano gli ancoraggi per scorrere in una posizione specifica sulla pagina, non è necessario abilitare questa opzione.
- Scorrimento uniforme: rende lo scorrimento della pagina più fluido.
- Durata scorrimento - il tempo dopo il quale la pagina si sposterà completamente all'inizio.
- Transizione scorrimento - Aggiunge più effetti visivi allo scorrimento.
- Transition Easing - "indebolendo" il movimento all'inizio della pagina.
- Link Location - la posizione dell'icona. Per impostazione predefinita, il pulsante si trova nell'angolo inferiore destro.
- Usa stili – stile del pulsante individuale, che può essere impostato nel campo sottostante. Se impostato su un valore negativo, tutte le impostazioni di stile verranno prese dal tema attivo del sito.
- Link Style - un campo per inserire i parametri dello stile dei pulsanti.
Per personalizzare lo stile del pulsante "su", devi avere almeno un minimoConoscenza CCS. Altrimenti, dovresti cambiare il valore del penultimo parametro su "No".
Un' altra importante sfumatura è che la consueta iscrizione sull'icona contiene il testo inglese: Return to Top. Tale testo non può essere presente su un sito in lingua russa, quindi dovresti semplicemente disabilitarlo nei parametri del plugin o cambiarlo in russo.
Per modificare questa iscrizione, devi accedere al server del sito utilizzando FTP o il file manager integrato nell'hosting. Successivamente, nella directory "/administrator/language/en-GB/" devi trovare un file chiamato "en-GB.plg_system_topofthepage.ini".
Prima di modificare il testo, dovresti cambiare la codifica di questo documento in UTF-8. Questo renderà la normale visualizzazione delle lettere russe.
Successivamente troviamo la seguente riga:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Torna in alto"" |
e cambia la frase tra virgolette in russo. Puoi usare frasi come "Su!", "In cima!" o "Su!".
Alla fine, dovrai salvare il file modificato e controllare il pulsante "su" per il sito su Joomla.
Pulsante su per Ucoz
Il pulsante "su" per il sito su Ucoz dovrà essere eseguito utilizzando l'iniezione di codice, poiché è impossibile collegare i plug-in per questo CMS. Tuttavia, questo non richiede un lungo studio dei file di sistema e la ricerca delle righe necessarie, devi solo incollare un piccolo codice nel posto giusto.
Per installarcirichiesto:
- vai a "Pannello di controllo -> Design -> Design Management (modelli) -> Fondo del sito;
- inserisci lo script (puoi trovarlo sul sito ufficiale del progetto e su risorse di terze parti).
Conclusione
Dopodiché, un'icona apparirà nell'angolo in basso a destra, spostando l'utente in cima alla pagina.
Come puoi vedere, impostare il pulsante Indietro per qualsiasi CMS non è stato particolarmente difficile. È possibile utilizzare sia un metodo di installazione automatizzato (plugin) che manuale. Tuttavia, quest'ultima opzione rimane la più adatta, in quanto non influisce negativamente sulle prestazioni del sito.
Puoi utilizzare il pulsante "torna all'inizio" per un sito HTML per ridurre al minimo il consumo delle risorse del sito, poiché un gran numero di estensioni può avere un impatto negativo sulle prestazioni della risorsa. Un plug-in del pulsante "su" non sarà in grado di influenzare molto il tempo di caricamento delle pagine del sito, ma nella maggior parte dei casi l'utente ha almeno una dozzina di plug-in installati sul CMS. In questo caso, qualsiasi plug-in può influire negativamente sulle prestazioni delle pagine del sito.
