Cum sa faci un buton de pe site-ul pentru a urca la partea de sus

Cum sa faci un buton de pe site-ul pentru a urca la partea de sus.

Pasul 1. Introduceți în sus / partea de sus a paginii.

Acest text este esențial ca a fost pe fiecare pagină a site-ului dvs., acesta numește script-ul și atribuie imaginea în sus. Dacă aveți un site dinamic (toate CMS, cum ar fi Joomla, WordPress, Drupal și alte CMS sunt dinamice, adică pagina este generată în momentul prezentării la ea), este recomandabil să plasați șablonul, dacă utilizați site-ul mai mult de un șablon, apoi în toate șabloanele sunt folosite și în alte situații în șabloanele pe care nu specificați nu va avea acest buton.







Pentru Joomla sus. Se introduce în fișierul index.php, care este situat la your_site / template-uri / vasha_tema între tag-uri , practic, am introdus direct înainte de eticheta .

Butonul Sus pentru uCoz. În editarea șablonul (managementul de proiectare - partea de jos), la partea de jos a codului înainte de închidere .

Pentru alte site-uri CMS și statice. Dacă ați introdus deja contoare Yandex Metrics, LiveInternet, acest cod trebuie să fie inserat în același loc tu și codul de încorporare pentru contoare. Practic este un fișier index.html, index.php template-uri. Daca nu sunteti pe un cms statice, este necesar să se înregistreze în fiecare pagină.

Pasul 2. Setați stilul de sus / partea de sus a paginii.

Veți avea nevoie pentru a crea un stil și locația butonul de sus. va copia următorul text pentru acest lucru trebuie să:
Poziția #toTop: fix;
bottom: 20px;
dreapta: 2px;
fundal: nici unul;
cursor: pointer;>

Buton de pe partea de sus pentru Joomla. Am pus în șabloane / vasha_tema / fișiere your_site / CSS cu extensia css poate exista o mulțime, este, probabil, template.css sau general.css.







Butonul din partea superioară pentru uCoz. Se introduce în partea de jos a Oficiului de Design - Style Sheet (CSS).

Pentru alte site-uri CMS și statice. În cazul în care pentru a seta stilul de pagină, inserați acest cod.

Pasul 3: Salvați imaginea și script-ul.

Salvați și schimba numele și extensia la toTop.js.

Pasul 4. Connect jQuery.

Pe multe site-uri, acest script nu va migra lin in sus, dar se va adăuga pur și simplu „#“ și reporniți site-ul, este pentru că jQuery nu este conectat. Acesta trebuie să fie conectat. Unii dintre cei care au lucrat la site-ul care este pe jQuery, atunci cu siguranta acesta este deja atașat și nu ar trebui să re-conectați. JQuery pentru a se conecta la un site, efectuați următorii pași:

Pentru Joomla. Același fișier, care a condus la pasul 1.

Pentru alte site-uri CMS și statice. Dacă site-ul este static (nu este folosit nici un CMS - motor) - toate paginile alternative pentru site-uri dinamice pe alte CMS - partea a șablonului (temă) în care se află secțiunea HEAD. Găsiți secțiunea HEAD - tot ceea ce este între deschidere și închidere tag-uri: ... și se adaugă la sfârșitul său, înainte de închidere următorul cod.

În acest caz, se conecteaza cu Google jQuery, dacă nu doriți să utilizați o resursă terță parte, utilizați a doua metodă.

Instalarea pe butonul de sus făcut. În continuare, puteți selecta butonul pentru site-ul dvs. și citiți despre modul de a face un text simplu în loc de imagini.

Arrow la etaj poate arata diferit. Eu te-ai decis un pic mai ușor de a lucra și a luat imaginea, le-a transferat în format PNG, fundal tăiate, astfel încât acestea să fie transparente. Made dimensiunea maximă 80px, cu atât mai mult cred că nu este necesar. Simțiți-vă liber să le folosească. Editare: schimba culoarea, dimensiunea, adăuga text și fundal. Pentru a le descărca, treceți peste imaginea preferată, faceți clic pe butonul din dreapta al mouse-ului și selectați Salvare imagine pentru.

Cum loc de imagini pentru butonul de pe partea de sus a textului.

Pentru a face acest lucru, va trebui să faceți următoarele:

Înlocuiți cu:
la etaj

Și schimba CSS pentru:
latime #toTop: 89px;
înălțime: 24px;
fundal: # D9DAEE;
-Moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
Poziția: fix;
bottom: 30px;
dreapta: 2px;
text-align: center;
text-decoration: none;
font-size: 12pt;
Culoare: # 1A2534;
cursor: pointer;>

Comanda un site >>
de SEOKlub