479 Shares 9109 views

il tasto "Up" per il sito: come fare

Tale funzione, il pulsante "up" per il sito, rendere Internet più conveniente risorsa per i suoi visitatori. Aiuta a navigare facilmente da qualsiasi punto della pagina nella parte superiore. Questo è un must per i negozi online e siti con oggetti di grandi dimensioni che richiedono un lungo scorrere verso il basso.

Perché è necessario

Al momento, la maggior parte dei siti di questa funzione, il pulsante "up" non è, e non c'è nulla di fondamentale. Ma il suo uso può portare molti vantaggi sia per la risorsa Internet e ai suoi visitatori.

Vantaggi per i visitatori

Spesso, quando la pagina della risorsa internet è pesantemente caricato quantità di informazioni, quando l'articolo informazioni prende un sacco di spazio e di dover scorrere la pagina usando la rotellina del mouse. Il vantaggio di questo, alla fine di questo articolo può presentare un sacco di commenti ad esso.

Quando un visitatore sta leggendo un articolo in uno scrolling noiosa personale verso il basso una pagina non è presente, ma quando il testo si è conclusa ed è necessario per spostarsi in alto, comincia a stancare un po '. La maggior parte delle persone semplicemente troppo pigro per condurre una lunga pergamena, e hanno appena chiudere il sito, piuttosto che un altro passeggiata attraverso i suoi spazi aperti.

Utilizzo di un pulsante per passare istantaneamente alla parte superiore della pagina rende il passatempo sul sito più conveniente.

I vantaggi di una risorsa Internet

Aspetti positivi della risorsa stessa basano su fattori storici, perché più facile da navigare il sito migliora i fattori comportamentali, come tutti i visitatori saranno più attivi nelle loro azioni e passare ad altre pagine.

In tal modo i dati fattori comportamentali influenzano l'atteggiamento di tutti i motori di ricerca per il sito e portare a una migliore spazio nei risultati di ricerca.

Come rendere il pulsante "Up" sul sito web da solo

Sono indagati ulteriormente. Tasto per scorrere fino al sito per qualsiasi CMS si può sempre fare il vostro proprio seguendo alcuni passi molto semplici:

  • creazione di un'immagine;
  • la creazione dello script;
  • Creando uno stile tasto;
  • aggiungendo al sito.

immagine del pulsante

Per aggiungere il "up" sul sito, per la necessità di iniziare a fare per sé un'icona, se cliccata, l'utente si sposta la pagina. È possibile utilizzare le opzioni già pronti, tra i quali possiamo sempre scegliere il più adatto.

Per migliorare l'aspetto del pulsante, è necessario apportare alcuni miglioramenti, in particolare per fare uno sprite, permette basati su CSS combinare le immagini di sfondo, in tal modo aver creato una breve animazione.

Per le opere di grafica, è possibile utilizzare qualsiasi editor. Ma l'opzione più conveniente è il servizio online Pixlr, dal momento che non c'è nulla da scaricare e nessuna necessità, si possono utilizzare direttamente nel browser.

Per iniziare a lavorare nell'editor finestra per scegliere il "caricare un'immagine dal computer." A titolo di esempio, prendiamo l'immagine del razzo.

Se la dimensione delle icone selezionate sono troppo grandi, è necessario fare un piccolo aggiustamento a misura. Per fare questo, "Modifica", andare al menu principale e selezionare il campo, e dopo «Libera trasformare …»

Avanti, accanto alla foto ci sono i marcatori speciali che si stanno muovendo, è possibile ridimensionare l'immagine. Per mantenere le proporzioni, è possibile utilizzare il tasto Maiusc, ritenendo che, è necessario spostare i marcatori azzurri. Al termine di queste azioni immagine missili si ottiene.

Il prossimo passo – la creazione di una copia del livello.

Ora è necessario spostare l'immagine dei nuovi missili strato un po '. Per fare questo, sarà conveniente usare lo strumento sposta, che si trova nella seconda colonna del menu a sinistra, e la freccia "up" sulla tastiera.

Ora è necessario per rendere l'immagine in alto in bianco e nero. Questo può essere fatto utilizzando la voce "Correzione" – "Tonalità / Saturazione" dal menu in alto. Per un cursore decolorazione completa "Saturazione" dovrebbe prendere il valore di -100. Questa azione farà l'effetto che il pulsante "Up" si trasformerà dal bianco e nero al colore quando si passa sopra di esso.

Il tocco finale – la rimozione di spazio in eccesso intorno alle due immagini. Per fare questo, selezionare la voce "Trim" dal menu a sinistra e selezionare solo due missili in un rettangolo. Per fare un taglio presse il tasto Invio.

Per ottenere un'immagine in cui non c'è troppo spazio. È necessario registrare la larghezza e l'altezza delle immagini risultanti, come questi dati saranno utili nella fase successiva.

Per salvare la necessità di fare clic su "File" – "Salva", dove la sinistra in "Risorse del computer" scrivere il nome dell'immagine (solo il layout della tastiera inglese), scegliere il formato (in questo caso – PNG) e fare clic su "Sì".

File con lo script "Up" pulsante

Scrivere uno script, in questo caso non è necessario. Sarà possibile utilizzare un opzione pubblica, portando in alcuni emendamenti al codice pronto.

Ciò richiederà di scaricare qualsiasi editor di codice. Il più popolare e anche una versione gratuita – è Notepad ++. Dopo l'installazione è necessario copiare e incollare tutto questo codice:

<Script type = "text / javascript "> $ (document) .ready (function () {$ (window) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ( '# scroller ') fadeIn ();. } else {$ (' # scroller ') fadeOut () ;.}}); $ (' # scroller ') click (function () {$ ('. corpo, html '). Animate ({scrollTop: 0}, 400); return false;}); });

Quindi fare clic sul menu in alto "File" – "Salva come …", e quindi salvare il codice nel formato .js. È quindi possibile utilizzare questo codice sul tuo sito caricando un file di script e immagini con FTP-connessioni.

L'installazione in loco

Per impostare il pulsante di scorrimento verso l'alto per il sito, è necessario inserire il codice nella posizione desiderata. Inscrivere deve essere prima del tag .

La creazione di uno stile di pulsante con i CSS

Il più delle volte, il tasto "up" per un sito che si trova in basso ( "cantina").

Il file style.css sito, è necessario aggiungere il seguente codice:

"/ * Pulsante in alto * /

.scrollTop {
sfondo: url ( 'images / up.png ') 0 0 no-repeat; / * percorso onositelny all'immagine * /
width: 39px; / * larghezza di un tasto * /
altezza: 96px; / * 50% dell'altezza del pulsante * /
bottom: 5px; / * posizione fissa del margine inferiore * /
a sinistra: 89%; / * offset a sinistra * /
}
.scrollTop: hover {background-position: 0 -108px; } / * Offset sfondo * / "

In questo caso, i dati necessari e la larghezza e l'altezza dell'immagine. Resta solo da inserire i dati nel codice, e il pulsante "up" per il sito sarà pronto! Che altro?

il tasto "Up" per un sito su WordPress

Per questo pulsante CMS "Up" può essere fatto con l'aiuto di plug-in, così come in modo indipendente.

plugin metodo più conveniente e facile da installare, poiché richiederebbe solo un clic sul pulsante installare e configurare tutte le funzionalità del menu plugin.

Con la scelta di quest'ultimo è quello di avvicinarsi con cautela, perché con esso si può facilmente acquisire il virus nel sito. Il più popolare e provata opzione – un plug-in chiamato Scroll Torna in alto. Potete scaricarlo utilizzando la ricerca standard plugin WordPress.

Questa estensione ha funzionalità multiple, ed è molto facile da individuare il pulsante "up" per un sito su WordPress. Tutti i valori di cambiamento non ha necessariamente bisogno di configurare solo il tipo e la posizione del pulsante sulla pagina web.

Come si può vedere, l'installazione del pulsante "up" con l'aiuto di plug-in è molto semplice. Ma c'è un avvertimento importante, che consiste nel fatto che ogni plug-in installato carica il CMS. Questo può influenzare la velocità della risorsa internet. È per questo che la maggior parte dei proprietari di siti web stanno cercando di effettuare tutte le modifiche direttamente nel codice, invece di utilizzare estensioni di terze parti. È possibile effettuare il pulsante "up" per il sito in HTML, che riducono al minimo le risorse consumate.

Prima di modificare i file di sistema di WordPress, è necessario recuperare. Quindi è possibile seguire tutti i passaggi per creare i pulsanti, di cui sopra.

Knock "up" per Joomla

CMS Joomla supporta anche l'installazione di plug-in come WordPress. L'opzione di maggior successo "up" pulsante per un sito su Joomla 3 è un plug-in chiamato in alto alla pagina.

Questo CMS di qualsiasi plug-in può essere installato tramite la "Gestione Estensioni". Per fare questo:

  • scaricare il plug-in Internet;
  • cliccare sul pulsante "Browse" nel gestore di estensione;
  • selezionare il file scaricato;
  • cliccare su "download" e installare.

Ora è necessario attivarlo in "Plugin Manager". Per fare questo, si deve andare a questa sezione, trovare la spina e passare il suo status di "abilitato".

Avanti è l'impostazione delle opzioni di espansione, con l'aiuto della stessa sezione, in cui è necessario trovare la sezione "Parametri di base" di questo plugin sul lato destro.

In alto alla pagina ha le seguenti caratteristiche:

  • Esegui in / amministratore – abilitando l'opzione non solo una risorsa di Internet, ma anche nel pannello CMS Joomla.
  • Pulsante rivelare la posizione – quanti pixel devono riavvolgere l'utente al pulsante "up" lì.
  • Omettere Testo pulsante – Il testo del pulsante.
  • Sempre al Top – sito tutto il tempo sarà visualizzata dal suo inizio. Quando si utilizzano i "tasselli" per scorrere fino a una posizione specifica nella pagina, questa opzione non ha bisogno di essere attivato.
  • Smooth Scroll – rende la pagina di scorrimento più agevole.
  • Scroll Durata – tempo dopo il quale la pagina è completamente spostato verso l'alto.
  • Scroll di transizione – aggiunge scorrendo grandi effetti visivi.
  • Transizione easing – «indebolimento movimento" alla parte superiore della pagina.
  • Link Location – Icone di localizzazione. Come standard, il pulsante che si trova nell'angolo in basso a destra.
  • Utilizzare gli stili – pulsanti stile individuale, che possono essere specificati nel campo sottostante. Se si è passati ad un valore negativo, saranno presi tutti i parametri di stili dal sito tema attivo.
  • Collegamento Style – campo per l'inserimento il pulsante Impostazioni stile.

Self-tuning "Up" stile del tasto, è necessario avere almeno una conoscenza minima di CCS. In caso contrario, è necessario modificare il valore del parametro penultima su "No".

Una cosa più importante è che la solita iscrizione sul icona contiene un testo inglese: Torna all'inizio della pagina. Sul sito russo testo simile non può essere presente, così si dovrebbe semplicemente disabilitarlo nei parametri del plugin di cambiare nulla sul russo.

Per modificare le etichette bisogno di andare al server del sito utilizzando il file manager built-in server FTP o di hosting. Avanti nella directory «/ administrator / language / it-IT /» bisogno di trovare un file chiamato «en-GB.plg_system_topofthepage.ini».

Prima di modificare il testo dovrebbe cambiare la codifica del documento da UTF-8. Questo renderà la normale visualizzazione delle lettere russe.

Avanti, troviamo la seguente riga:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Return to Top " "

e cambiare la frase tra virgolette in lingua russa. È possibile utilizzare frasi come "Up", "Start!" O "Up!".

Alla fine della necessità di salvare il file modificato e verificare i pulsanti "up" per il sito su Joomla.

il tasto "Up" per uCoz

il tasto "Up" per un sito su uCoz hanno a che fare con l'introduzione del codice, dal momento che la spina di collegamento per questo CMS è impossibile. Tuttavia, questo non richiede molto tempo per imparare i file di sistema e la ricerca di linea necessarie devono solo inserire un piccolo codice nella posizione desiderata.

Per l'installazione, abbiamo bisogno di:

  • andare al "Pannello di controllo -> Design -> Gestione della progettazione (template) -> parte inferiore del sito;
  • Inserire lo script (si possono trovare sulle risorse sito ufficiale del progetto e di terze parti).

conclusione

Dopo di che, nell'angolo in basso a destra dell'icona apparirà, spostare l'utente fino alla cima della pagina.

Come si è visto, l'installazione del pulsante "Up" per uno dei CMS non era particolarmente difficile. Può essere usato come un metodo automatico di installazione (plug-in), e manuale. Tuttavia, la seconda opzione è la più appropriata, in quanto non influisce negativamente sulle prestazioni del sito.

È possibile utilizzare la "up" per il sito in HTML, per ridurre al minimo il consumo di risorse del sito, come un gran numero di estensioni può avere un impatto negativo sulle prestazioni della risorsa. Un pulsante di plug-in "up" non influirà notevolmente il tempo di caricamento delle pagine, ma nella maggior parte dei casi l'utente è presente almeno una dozzina di plug-in installati sul CMS. In questo caso, qualsiasi plug-in può influire negativamente sulle prestazioni delle tue pagine.