O astfel de funcție precum butonul „sus” pentru site face resursa de internet mai convenabilă pentru vizitatorii săi. Vă ajută să vă mutați cu ușurință de oriunde pe pagină în partea de sus a paginii. Aceasta este o necesitate pentru magazinele online și site-urile cu articole mari care necesită derulare lungă în jos.
Pentru ce este
În acest moment, majoritatea site-urilor nu au o funcție precum butonul „sus” și nu este nimic critic în acest sens. Dar utilizarea sa poate aduce multe avantaje atât pentru resursa de internet, cât și pentru vizitatorii acesteia.
Beneficiu pentru vizitatori
Se întâmplă adesea atunci când pagina unei resurse de internet este încărcată puternic cu informații, când un articol informațional ocupă mult spațiu și trebuie să derulezi în jos pagina cu rotița mouse-ului. În plus, la sfârșitul articolului pot apărea multe comentarii despre acesta.
Când un vizitator citește un articol, nu este nimic obositor în derularea paginii, dar când textul s-a încheiat și trebuie să te muți în sus, începe să devină puțin obositor. Majoritatea oamenilor vor fi pur și simplu prea leneși să deruleze mult timp și pur și simplu vor închide site-ul, în loc să facă o altă plimbare prin întinderile sale.
Folosind butonulpentru a trece instantaneu în partea de sus a paginii, este mai convenabil să petreci timpul pe site.
Beneficiul pentru resursa de internet
Aspectele pozitive pentru resursa în sine provin din factorii din trecut, deoarece navigarea mai ușoară pe site îmbunătățește factorii comportamentali, deoarece toți vizitatorii vor fi mai activi în acțiunile lor și vor trece la alte pagini.
Astfel, acești factori comportamentali afectează atitudinea tuturor motoarelor de căutare față de site și conduc la o îmbunătățire a poziției în rezultatele căutării.
Cum să faci singur butonul „sus” de pe site
Trafic în continuare. Puteți face oricând singur un buton de derulare în sus pentru un site pe oricare dintre CMS, urmând doar câțiva pași extrem de simpli:
- crearea imaginii;
- crearea unui script;
- creați stilul butonului;
- adăugarea pe site.
Imagine pentru buton
Pentru a adăuga un buton „sus” pe site, mai întâi trebuie să creați pictograma propriu-zisă, când faceți clic, utilizatorul se va muta în partea de sus a paginii. Pentru a face acest lucru, puteți folosi opțiuni gata făcute, dintre care o puteți alege întotdeauna pe cea mai potrivită.
Pentru a îmbunătăți aspectul butonului, trebuie să facem unele îmbunătățiri, și anume, să facem un sprite care ne permite să combinăm imagini de fundal bazate pe CSS, creând astfel o animație din ele.
Pentru lucrări grafice, puteți folosi orice editor. Dar cea mai convenabilă opțiune ar fi un serviciu online. PIXLR, deoarece nu există nimic de descărcat aici și îl puteți folosi direct în browser.
Pentru a începe, în fereastra editorului care apare, selectați câmpul „Încărcați imaginea de pe computer”. Să luăm ca exemplu imaginea unei rachete.
Dacă dimensiunile pictogramei selectate sunt prea mari, atunci va trebui să faceți o ajustare mică a dimensiunii. Pentru a face acest lucru, accesați meniul de sus și selectați câmpul „Editați”, iar după „Transformare liberă…”
În continuare, în dreptul imaginii apar marcaje speciale, mișcându-se pe care le puteți modifica dimensiunea imaginii. Pentru a menține proporțiile, puteți folosi tasta Shift, ținând apăsată pe care trebuie să mutați marcajele albastre. La sfârșitul acestor pași, se obține o imagine a unei rachete.
Următorul pas este să creați o copie a stratului.
Acum trebuie să mutați puțin imaginea rachetei din noul strat. Pentru a face acest lucru, va fi convenabil să utilizați instrumentul de mutare, care se află în a doua coloană a meniului din stânga și săgeata sus de pe tastatură.
Acum trebuie să facem imaginea de sus alb-negru. Acest lucru se poate face folosind elementul „Correcție” - „Nuanță / Saturație” din meniul de sus. Pentru o desaturare completă, glisorul Saturație ar trebui să fie setat la -100. Această acțiune vă va permite să creați un efect în care butonul „Sus” va trece de la alb-negru la culoare atunci când treceți cu mouse-ul peste el.
Atingerea finală este eliminarea spațiului suplimentar din jurul celor două imagini. Pentru a face acest lucru, selectați elementul „Decupare” din meniul din stânga șiselectăm doar două rachete într-un dreptunghi. Pentru a efectua decuparea, este apăsată tasta Enter.
Rezultatul este o imagine în care nu există spațiu liber suplimentar. Va trebui să notați lățimea și înălțimea imaginii rezultate, deoarece aceste date vor fi utile în pasul următor.
Pentru a salva, trebuie să faceți clic pe „Fișier” - „Salvare”, unde în paragraful din stânga „Computerul meu” scriem numele imaginii (doar aspectul în limba engleză), selectați formatul (în acest caz, PNG) și faceți clic pe butonul „Da”.
Fișier cu scriptul butonului „sus”
Nu trebuie să scrieți un script în acest caz. Va fi posibil să se utilizeze versiunea publică, făcând unele modificări codului final.
Pentru a face acest lucru, trebuie să descărcați orice editor de cod. Cea mai populară și gratuită opțiune este Notepad++. După ce îl instalați, trebuie să copiați și să inserați tot acest cod în el:
| $(document).ready(function(){ $(window).scroll(function () {dacă ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} altfel {$('scroller').fadeOut();}}); $('scroller').click(funcție () {$('corp, html').animate({scrollTop: 0}, 400); return false;}); }); |
În continuare, faceți clic în meniul de sus „Fișier” - „Salvare ca…”, după care salvăm codul în format.js. După aceea, puteți utiliza acest cod pe site-ul dvs. încărcând fișierele de script și imaginile pe acesta folosind o conexiune FTP.
Instalați pe site
Pentru a seta butonul de derulare în sus pentru site, trebuie să introducețicodul locului necesar. Trebuie să îl introduceți înainte de etichetă.
Crearea unui stil de buton cu CSS
Cel mai des, butonul „sus” pentru site este situat în partea de jos („subsol”).
Următorul cod trebuie adăugat în fișierul style.css al site-ului:
|
/Buton sus/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/calea imaginii native/ width:39px;/ buton lățime/ înălțime:96px;/50% înălțime buton/ bottom:5px;/captuseala de jos în poziție fixă/ stânga:89%;/deplasați la stânga/ }.scrollTop:hover{ background-position:0 -108px; } /offset fundal/" |
În acest caz, vor fi necesare acele date despre lățimea și înălțimea imaginii. Rămâne doar să introduceți datele primite în cod, iar butonul „sus” pentru site va fi gata! Ce altceva?
Buton sus pentru site-ul Wordpress
Pentru acest CMS, butonul „Sus” poate fi creat folosind pluginuri, precum și independent.
Metoda pluginurilor este cea mai convenabilă și mai ușor de instalat, deoarece necesită doar să faceți clic pe butonul de instalare și să configurați toate funcționalitățile din meniul de pluginuri.
Alegerea acestuia din urmă trebuie abordată cu prudență, deoarece cu ea va fi ușor să dobândiți un virus pe site. Cea mai populară și dovedită opțiune este un plugin numit Scroll Back To Top. Îl puteți descărca folosind căutarea standard pentru pluginuri Wordpress.
Această extensie arefuncționalități multiple și va fi foarte ușor să personalizați butonul „sus” pentru un site Wordpress. Nu este deloc necesar să schimbați toate valorile, trebuie doar să configurați aspectul și locația butonului de pe pagina site-ului.
După cum puteți vedea, configurarea butonului de configurare cu pluginuri este foarte ușoară. Dar există o nuanță importantă, și anume că fiecare plugin instalat încarcă CMS-ul. Acest lucru poate afecta viteza resursei de Internet. De aceea, majoritatea proprietarilor de site-uri încearcă să facă toate modificările direct în cod, și nu cu ajutorul extensiilor terțe. Puteți crea un buton „sus” pentru un site HTML, care va minimiza resursele consumate.
Înainte de a schimba toate fișierele de sistem Wordpress, trebuie să le faceți o copie de rezervă. Apoi puteți urma toți pașii pentru a vă crea propriul buton, descriși mai sus.
Butonul „sus” pentru Joomla
CMS Joomla acceptă și instalarea de pluginuri, cum ar fi Wordpress. Cea mai de succes versiune a butonului „sus” pentru un site de pe Joomla 3 este o extensie numită Partea de sus a paginii.
În acest CMS, orice plugin poate fi instalat prin „Extension Manager”. Pentru aceasta aveți nevoie de:
- descărcați pluginul de pe Internet;
- faceți clic pe butonul „Răsfoiți” din managerul de extensii;
- selectați arhiva descărcată;
- faceți clic pe „Descărcați” și instalați.
Acum trebuie să-l activați în „Manager de pluginuri”. Pentru astatrebuie să accesați această secțiune, să găsiți pluginul și să îi schimbați starea la „activat”.
Următorul pas este să configurați toți parametrii extensiei folosind aceeași secțiune în care trebuie să găsiți „Parametrii de bază” ai acestui plugin în partea dreaptă.
Partea de sus a paginii are următoarea funcționalitate:
- Run în/administrator - activarea opțiunii nu numai pe resursa de Internet, ci și în panoul CMS Joomla în sine.
- Button Reveal Position - câți pixeli trebuie să deruleze utilizatorul pentru ca butonul sus să apară.
- Omit Button Text - prezența textului pe buton.
- Always at Top - pagina site-ului va fi întotdeauna afișată din partea de sus. Când utilizați ancore pentru a derula la o anumită locație de pe pagină, această opțiune nu trebuie să fie activată.
- Smooth Scroll - face derularea paginii mai fluidă.
- Durata derulării - timpul după care pagina se va muta complet la început.
- Scroll Transition - Adaugă mai multe efecte vizuale la defilare.
- Transition Easing - „slăbirea” mișcării către partea de sus a paginii.
- Link Location - locația pictogramei. În mod implicit, butonul este situat în colțul din dreapta jos.
- Utilizați stiluri – stil de buton individual, care poate fi setat în câmpul de mai jos. Dacă treceți la o valoare negativă, atunci toate setările de stil vor fi preluate din tema activă a site-ului.
- Stil link - un câmp pentru introducerea parametrilor stilului de buton.
Pentru a personaliza stilul butonului „sus”, trebuie să aveți cel puțin minimCunoștințe CCS. În caz contrar, ar trebui să comutați valoarea penultimului parametru la „Nu”.
O altă nuanță importantă este că inscripția obișnuită de pe pictogramă conține textul în limba engleză: Return to Top. Un astfel de text nu poate fi prezent pe un site în limba rusă, așa că ar trebui pur și simplu să îl dezactivați în parametrii pluginului sau să îl schimbați în rusă.
Pentru a schimba această inscripție, trebuie să accesați serverul site-ului folosind FTP sau managerul de fișiere încorporat în găzduire. Apoi, în directorul „/administrator/language/en-GB/” trebuie să găsiți un fișier numit „en-GB.plg_system_topofthepage.ini”.
Înainte de a schimba textul, ar trebui să schimbați codificarea acestui document în UTF-8. Acest lucru va face afișarea normală a literelor rusești.
În continuare găsim următoarea linie:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Întoarcere la început" „ |
și schimbați expresia între ghilimele în rusă. Puteți folosi expresii precum „Sus!”, „To the top!” sau „Sus!”.
La sfârșit, va trebui să salvați fișierul modificat și să verificați butonul „sus” pentru site-ul de pe Joomla.
Buton sus pentru Ucoz
Butonul „sus” pentru site-ul de pe Ucoz va trebui făcut folosind injecția de cod, deoarece este imposibil să conectați pluginuri pentru acest CMS. Cu toate acestea, acest lucru nu necesită un studiu lung al fișierelor de sistem și căutarea liniilor necesare, trebuie doar să lipiți un mic cod în locul potrivit.
Pentru a ne instalanecesar:
- accesați „Panou de control -> Design -> Gestionare design (șabloane) -> Partea de jos a site-ului;
- inserați scriptul (poate fi găsit pe site-ul oficial al proiectului și pe resursele terțelor părți).
Concluzie
După aceea, o pictogramă va apărea în colțul din dreapta jos, mutând utilizatorul în partea de sus a paginii.
După cum puteți vedea, configurarea butonului înapoi pentru oricare dintre CMS nu a fost deosebit de dificilă. Puteți folosi atât o metodă de instalare automată (plugin-uri), cât și una manuală. Cu toate acestea, această din urmă opțiune rămâne cea mai potrivită, deoarece nu afectează negativ performanța site-ului.
Puteți folosi butonul „înapoi în sus” pentru un site HTML pentru a minimiza consumul de resurse ale site-ului, deoarece un număr mare de extensii pot avea un impact negativ asupra performanței resursei. Un plugin cu butonul „sus” nu va putea afecta foarte mult timpul de încărcare a paginilor site-ului, dar în majoritatea cazurilor utilizatorul are cel puțin o duzină de pluginuri instalate pe CMS. În acest caz, orice plugin poate afecta negativ performanța paginilor site-ului.
