Una dintre opțiunile pentru îmbunătățirea utilizabilității site-ului este setările săgeților pentru derularea paginii în partea de sus. Acum, ia în considerare modul în care se face acest lucru.
O dată voi spune, exemplul dat va funcționa numai în prezența JQuery. În prezent, el este prezent pe aproape fiecare site.
În primul rând, avem nevoie de un desen al săgeții. Acum există un număr de ele. Dacă introduceți interogarea "săgeată în partea de sus" în căutare Yandex, vom obține o mulțime de săgeți frumoase. Dacă este necesar, puteți specifica că a fost un format PNG (cu fundal transparent). Găsim ceea ce ne place, descărcăm. Îl procesăm în Photoshop (sau la cine este mai convenabil), astfel încât acesta să fie de 60 până la 60 de pixeli, de exemplu.
Acum vom plasa săgeata în sus pe site.
Vom face acest lucru prin intermediul proprietății CSS - fundal. Îmi place mai mult această opțiune. există mai multe moduri de a gestiona elementul. Dar acesta este cineva obișnuit cu asta.
Adăugați stilul următor în foaia de stil CSS:
Ce am scris aici?
Primele 2 proprietăți (lățimea și înălțimea) sunt dimensiunile imaginii noastre. Ele pot fi schimbate la orice dimensiune.
În continuare (fundal) trebuie să specificați calea spre imagine.
Proprietatea cursorului: pointer; - face cursul mouse-ului sub forma unui deget atunci când este îndreptat spre obiect.
Următoarele 4 proprietăți (poziția: fix; fund: 30px; stânga: 50%; marginea-stânga: 520px;) sunt strâns legate. Primul blochează obiectul de pe pagină astfel încât defilarea să nu afecteze poziția sa. Următoarele 3 proprietăți îl fixează în partea dreaptă a poziției inițiale. Cu aceste numere puteți să experimentați așa cum doriți.
Ultima proprietate pune blocul peste toate elementele de pe site.
Acum din partea de jos a paginii scriem:
Uite ce avem. Blocul este acum în cazul în care aveți nevoie de el, dar până în prezent nu a răspuns la presare. Acest lucru acum și face.
Pe fiecare pagină a site-ului, unde este prezent acest bloc, introduceți următorul cod:
Acum când faceți clic pe săgeată, pagina va derula în partea de sus. Firește, JQuery ar trebui deja conectat.
În codul de mai sus, există o cifră de 500. Acesta este momentul pentru care pagina ar trebui să ajungă în partea de sus. Puteți să o schimbați după cum doriți.
Ar părea totul, dar nu. Când pagina este deja în sus, nu avem nevoie de această săgeată. În acest caz, adăugați următorul cod:
Acum când pagina este derulată cu mai puțin de 100 de pixeli, săgeata în partea de sus este ascunsă. În caz contrar, este afișat. Foarte convenabil.
Rețineți că acest exemplu nu va funcționa corect în Internet Explorer <9 версии. Связано это с тем, что они не поддерживают свойство position: fixed;. Но в последнее время пошла тенденция отказа от заточек сайтов под старые IE, поэтому я тоже решил не нагружать лишний раз сайт скриптами для IE.
Exemplul descris în acest articol pe care tocmai l-am implementat pe acest site. Puteți verifica;)
Trimiteți-le prietenilor: