WordPress kako prilagoditi položaj gumba za gore. Gornji gumb za WordPress - brzo skočite na vrh stranice

Pozdrav, prijatelji! U ovom članku želim vam pokazati kako možete napraviti gumb "Na vrhu" na web stranici. Ovaj će gumb biti koristan na stranicama s dugim člancima ili stranicama. Kada kliknete na gumb “Gore”, stranica će se vratiti na vrh, u glavni izbornik (zaglavlje stranice).

Obično, da bi instalirali takav gumb, svatko želi preuzeti dodatak što je brže moguće i ne zamara se previše, ali mislim da nema potrebe zatrpavati stranicu hrpom nepotrebnih dodataka, kada sve može učiniti vrlo lako i jednostavno bez korištenja dodataka.

Najljeniji mogu napraviti takav gumb pomoću mnogih dodataka, na primjer Scroll to Top ili WP Scroll To Top 😉

Možete se sjetiti kako pronaći i instalirati dodatak u jednom od .

Postavljanje gumba je vrlo jednostavno, u samo nekoliko jednostavnih koraka.

1. Otvorite datoteku function.php.

Postoje dva načina za otvaranje function.php:

• Otvorite uređivačem teksta u korijenskoj mapi svoje teme
• Idite na Izgled -> Uređivač i odaberite Funkcije teme (functions.php) za uređivanje

2. Kopirajte i zalijepite donji kod na samom dnu, prije završne oznake ?>.

Gif" />"; ) add_action("wp_head", "back_to_top_style"); funkcija back_to_top_style() ( echo " #totop ( kursor:pokazivač; položaj: fiksno; desno: 30px; dno: 30px; prikaz: ništa; obris: ništa; ) "; ) add_action("wp_footer", "back_to_top_script"); funkcija back_to_top_script() ( echo " jQuery(document).ready(function($)( $(window).scroll(function () ( if ($(this).scrollTop() > 400) $("#totop") .fadeIn(); else $("#totop").fadeOut()); 800); return false;

3. Spremite promjene i divite se gumbu Gore koji ste izradili.

A sada, predviđajući vaša pitanja, pokušat ću odgovoriti na njih unaprijed!

I tako, u ovom primjeru, stavili smo sliku na gumb. Kako biste uklonili sliku i dodali tekst, zamijenite redak 3 u kodu našeg primjera s:

Eho "Gore";

Kako biste zamijenili sliku gumba, zamijenite poveznicu slikom koja vam je potrebna u retku 3.

Gumb će se prikazati kada se spustimo više od 400 piksela prema dolje od zaglavlja stranice na stranici, a bit će skriven ako odemo više. Promjena visine na kojoj će se pojaviti gumb je prilično jednostavna; trebate zamijeniti vrijednost 400 visinom koja vam je potrebna u ovom retku koda:

Ako ($(ovo).scrollTop() > 400)

Ako vam nešto nije išlo slobodno napišite u komentarima! A ako radi, podijelite dojmove :)

Pozdrav, prijatelji! U ovom članku želim vam pokazati kako možete napraviti gumb "Na vrhu" na web stranici. Ovaj će gumb biti koristan na stranicama s dugim člancima ili stranicama. Kada kliknete na gumb "Gore", stranica će se vratiti na vrh, u glavni izbornik (zaglavlje stranice). Obično, da bi instalirali takav gumb, svatko želi preuzeti dodatak što je brže moguće i ne zamara se previše, ali mislim da nema potrebe zatrpavati stranicu hrpom nepotrebnih dodataka, kada sve može učiniti vrlo lako i jednostavno bez korištenja dodataka. Najljeniji mogu napraviti takav gumb pomoću mnogih dodataka, na primjer Scroll to Top ili WP Scroll To Top ;) Zapamtite...

Sve što se traži od webmastera je da je njegova stranica prikladna, da korištenje ne uzrokuje depresiju kod posjetitelja i da predložak ne ometa sposobnost korisnika da mirno proučavaju materijale resursa. Ako koristite nepromijenjenu WordPress temu, najvjerojatnije nećete moći stvoriti prikladnu web stranicu, jer gumbi za WordPress nisu instalirani prema zadanim postavkama - potrebno ih je dodatno preuzeti i aktivirati. Uostalom, kako bi korisnik mogao jednostavno čitati članke i kretati se kroz sadržaj, stranica mora imati gumb "Na vrhu".

Gumb "Natrag na vrh" mala je ikona strelice koja, kada se klikne, brzo pomiče stranicu prema gore.

Dakle, ako korisnik počne čitati članak ili odluči vidjeti što je napisano u komentarima, neće se morati mučiti sa skrolanjem stranice kasnije. Umjesto standardnog pomicanja preglednika, kliknut će se na ikonu gumba "Natrag na vrh" i glatko se pomaknuti na vrh stranice. Ovo je vrlo zgodno i praktički preduvjet za bilo koju "dugu" (ako su stranice s resursima toliko dugačke da ih morate listati) web stranicu. Ovaj članak će razmotriti dodatke za dodavanje gumba "Natrag na vrh".

jQuery Smooth Scroll je zgodan i brz modul za aktiviranje gumba "Top" na web mjestu. Da biste dodali takav gumb na resurs, samo preuzmite i instalirajte dodatak. Odmah nakon aktivacije, sa strane stranica pojavljuje se mali plutajući gumb. Olakšat će čitanje dugih članaka i okretanje stranica. Gumb ima moderan dizajn i neće se izgubiti u pozadini WordPress predloška.

A ako poznajete značajke programskog jezika CSS, možete samostalno prilagoditi gumb "Vrh" prema vlastitom nahođenju. Općenito, dodatak jQuery Smooth Scroll dovoljan je da zadovolji potrebe većine webmastera, no mi ćemo pokriti još nekoliko popularnih alata u slučaju da vam ovaj modul ne odgovara.

Slijedi jednako popularni dodatak Smooth Scroll Up - ovo je iznimno jednostavan i intuitivan alat koji će vam omogućiti da stvorite ikonu "Povratak na vrh" na bočnoj strani web-mjesta u nekoliko minuta. Iako modul nema mnogo postavki, vrlo je funkcionalan. Slijede glavne značajke dodatka Smooth Scroll Up:

• možete birati između različitih vrsta elementa "Top" (tekst s vezom, ikona, slika i tako dalje);
• Možete sami odabrati element za pomicanje prema gore iz vlastite kolekcije;
• možete dodati svoj komentar u blizini gumba za pomicanje na vrh;
• mjesto elementa na web mjestu je podesivo (ako je potrebno samo za prikladno čitanje stranice, onda je bolje postaviti ga s desne strane, ali dodatak vam omogućuje da ga postavite s lijeve strane, a u centar);
• možete dodati iznimke za prikaz u različitim dijelovima web stranice (onemogućiti prikaz gumba "Povratak na vrh" na glavnoj stranici ili ga deaktivirati na bilo kojoj drugoj stranici);
• Modul također radi na mobilnim verzijama stranice (ako je potrebno, za telefon se može ukloniti gumb "Na vrhu");
• postoje animacije za pomicanje (slide i fade, ili bez efekta animacije);
• možete odrediti udaljenost nakon koje će se pojaviti gumb "Vrh" (ovo je prikladnije za čitanje, jer se element neće pojaviti odmah nakon ulaska na web mjesto, već će se pojaviti samo u pravom trenutku);
• Možete dodati poveznicu na gumb "Natrag na vrh" kako biste otvorili stranicu u novoj kartici;
• Moguće je dodati vlastite CSS parametre za element.

Ovaj je dodatak savršen za one koji ne žele samostalno razmišljati o tome kakav će gumb biti. Ako samo želite korisnicima olakšati čitanje i pregledavanje, a da i dalje imate zanimljiv gumb za pomicanje, onda je WPFront Scroll Top upravo ono što trebate. Modul sadrži veliku zbirku gotovih ikona. A ako ne želite razvodniti pozornost korisnika ikonom "Dalje", možete jednostavno dodati pomični tekst bez slike.

Dodatak WPFront Scroll Top može se jednostavno instalirati na WordPress mehanizam. Sadrži mnogo postavki, kao što su:

• aktivacija/deaktivacija gumba;
• veličina ikone;
• stupanj prozirnosti;
• brzina pomicanja;
• dodavanje automatskog skrivanja gumba nakon određenog broja sekundi;
• pisanje oznake Alt za element;
• dizajn boje i pozadine teksta gumba (glavna stvar je da natpis bude udoban za čitanje, mora biti izražajan).

Napominjemo da ponuđeni alat nije dostupan na ruskom jeziku. Ali budući da nema ništa posebno za čitanje u postavkama, ne bi trebalo biti nikakvih poteškoća u korištenju.

Slijedi još jedan dodatak koji će poboljšati upotrebljivost vašeg resursa - alat Scroll Back To Top. Također sadrži mnoge mogućnosti prilagodbe. Element možete deaktivirati u bilo kojem trenutku, učiniti ga neprozirnim ili stvoriti pregled ikone. Veličina i boja elementa se lako podešavaju. Možete podesiti udaljenost od "vrha" stranice, nakon što se prođe gumb koji se pojavljuje. Položaj elementa na lijevoj, desnoj i sredini stranice.

Dodatak Scroll Back To Top ne sadrži velik broj vrsta ikona. Ima ih ukupno oko 10, ako je potrebno, možete isključiti ikonu i ostaviti samo tekst (“Dalje”, “Gore” itd.). Veličina ikona se podešava na posebnoj skali od jedan do šest. Za aktiviranje individualnog stila, u parametrima elementa postoji stavka "Extra CSS" za dodavanje vlastitog dizajna.

Ovo je engleski modul za postavljanje gumba "Povratak na vrh" na gotovo bilo koje mjesto na web mjestu. Uz nju će čitanje i okretanje stranica biti puno lakše jer se tipka može postaviti u jednu od četiri pozicije. Dodatak je konfiguriran na engleskom jeziku. Gumb se može aktivirati/onemogućiti za mobilnu verziju resursa. Brzina pomicanja je podesiva.

Zanimljivo je da Dynamic “To Top” Plugin radi s predmemorijom, tako da će redovni korisnici moći čitati vaše postove i listati kroz stranice bez ikakvog kašnjenja preglednika. Modul se savršeno prikazuje na računalima nove i stare generacije.

Sljedeći je Skysa Scroll-to-Top App, dodatak koji je potpuno drugačiji od svojih konkurenata. Nećete ga koristiti samo za dodavanje gumba "Natrag na vrh", već ćete također moći koristiti ovaj alat za izradu cijele trake widgeta. Na primjer, možete dodati plutajući blok s anketama, gumbima društvenih medija i elementom za pomicanje stranice. A kako dodatak ne bi usporio web mjesto, radi s predmemorijom preglednika. Mogućnosti ovog modula praktički su neograničene - možete čak dodati poveznice na traku s gumbom za pomicanje.

Preuzimanje jednog od ovih dodataka vas ne košta ništa. Ali to će biti od velike koristi za stranicu. Gumbi "Dalje", "Gore", "Natrag" itd. znatno će olakšati život posjetiteljima resursa. Vjerujte, bit će vam zahvalni! A uz njih i tražilice, budući da što je stranica praktičnija, to je njezina pozicija u pretraživanju viša.

Mnogi ljudi žele imati gumb "Natrag na vrh" na svojoj web stranici. Riječ je o strelici koja korisniku jednim klikom omogućuje odlazak na sam početak WordPress stranice.

Osobno smatram da su takve stvari potrebne samo ako su postovi na stranici jako dugi. Uostalom, posjetitelju će biti nezgodno stalno koristiti klizač ili miš! U ovoj situaciji, gumb “Povratak na vrh” za WordPress stranicu jednostavno je neophodan!

Ovu ideju možete implementirati pomoću . Nudim samo jedan, a sada ću objasniti zašto.

Činjenica je da sam morao eksperimentirati s otprilike pet dodataka, a svaki je imao svoje značajne nedostatke. Napokon smo uspjeli pronaći pristojnu opciju koja je jednostavna i praktična u svakom smislu.

Govorimo o dodatku za gumb Gore - ToTop Link. Možete ga preuzeti putem službene trake za pretraživanje dodataka u vašem WordPress administratorskom području. (Ako ne znate kako to učiniti, napišite u komentarima, pomoći ću vam).

Čudno je da ovaj skup karakteristika nije prisutan u mnogim razvojima. Međutim, dobro je da je barem jedna osoba napravila dodatak gumba za povratak na vrh za WordPress stranicu s fleksibilnim postavkama.

Bok svima! Kad je ovaj blog tek počeo, nisam ni razmišljao o tako zgodnoj značajci kao što je pomicanje stranice prema gore jednim gumbom. Ali kad su se pojavili obimni članci, shvatio sam da takav gumb jako nedostaje. Tko voli skrolati natrag na vrh cijelog članka? Izrada gumba "gore" pokazala se prilično jednostavnom. Postoje dvije mogućnosti: prva je korištenje gotovih skripti, druga je preuzimanje dodatka. Ali, prvo, prvo.

Prvo sam napravio statički gumb u podnožju stranice. Bila je to jednostavna slika strelice s karikom. Odnosno, pokazalo se da je nakon klika stranica odmah skočila, a na adresu web mjesta dodana je oznaka hash. Ovo je, naravno, daleko od najboljeg načina, ali gumb je izgledao lijepo, podigao ga je, što znači da je ispunio svoju funkciju. Moto programera: "Ako radi, ne diraj ga!"

Međutim, nakon nekog vremena došao sam do zaključka da još uvijek ne mogu bez plutajućeg gumba. Štoviše, vidio sam takve gumbe "gore" na mnogim renomiranim (i ne tako renomiranim) stranicama. Na ovaj način mnogo je praktičnije pregledati materijal; jedan klik na gumb i stranica se odmah vraća gore. A upotrebljivost je važan čimbenik u dizajnu svake web stranice.

Kao što sam već rekao, gumb "povratak na vrh" može se dodati na stranicu pomoću skripti koje koriste CSS i jQuery. Na mnogim stranicama to je kako je implementirano. Ali za WordPress postoji lakši način - dodatak Scroll To Up. Ima razne gumbe "gore" u gotovim varijantama. Sviđa mi se pogodnost WordPress stranice - možete pronaći dodatke za sve!

Skinite Scroll To Up, s kojim ćemo dodati upravo ovaj gumb “gore”, preko WordPress konzole, pa idite na postavke. Vidimo nekoliko kartica.


Ovdje možete postaviti brzinu pomicanja stranice prema gore kada kliknete gumb, animaciju njegovog pojavljivanja na web mjestu, njegovu poziciju na stranici. I ono najvažnije je vrsta gumba. To može biti jednostavan tekst, ikona ili slika gumba "gore", koju možete odabrati među gotovim ili prenijeti vlastitu. Dodatak ima dovoljan broj ugrađenih opcija gumba.

Ako vam se ne sviđa nijedan od predloženih gumba, možete navesti put do bilo koje slike na kartici Vaša vlastita slika.

U ostalim karticama možete postaviti boju pozadine, veličinu i boju fonta te stil. Svaka kartica odgovara određenoj vrsti gumba. Kao što vidite, lako je prilagoditi gumb tako da savršeno odgovara vašem web-mjestu. Sve je vrlo jednostavno i jasno.

Čak sam ušao u kod samog dodatka i zaokružio rubove gumba tako da je izgledao skladno s mojim dizajnom, a stranica je postala ljepša. Nakon što se udubite u kod, možete ismijavati gumbe na bilo koji način. Naravno, nitko ne zabranjuje korištenje skripti za WordPress, ali dodatak je puno lakše naučiti.

Kakva šteta što ne postoji takva funkcija za upravljanje vašom web stranicom: bocnuo sam je, a stranice su se same popele na vrh rezultata pretraživanja

Suvremeni korisnici vrlo su inertni i uglavnom vole imati sve pri ruci. Uz sve ostale uvjete, oni će za povremene posjete odabrati upravo ono mjesto gdje su uvjeti korištenja resursa što bliži idealnim, i to je sasvim prirodno. Tamo gdje je jednostavno i udobno, uz minimalno izgubljenog vremena, možete se upoznati s potrebnim informacijama bez zamaranja nepotrebnim pokretima.

Upravo ovi web resursi dobivaju značajnu prednost ne samo u obliku rastuće ciljne publike, već i u obliku povećanja prometa s tražilica, budući da tražilice veliku pozornost posvećuju ponašanju korisnika (utjecaj čimbenika ponašanja). Zašto sve ovo govorim? I sve samo radi toga da u promociji web stranica nema sitnica, koliko god to banalno zvučalo.

Na primjer, isti gumb na vrh (gore) za web mjesto. Čini se kao sitnica, nevrijedna pažnje, ali daje svoj doprinos poboljšanju upotrebljivosti stranice. Ako još niste pogodili o čemu govorim, primijetite kako se na mom blogu, kada skrolate stranicu prema dolje, s desne strane pojavljuje gumb u obliku strelice prema gore, kada kliknete možete se vratiti na najviši položaj.

Sada pogledajmo detaljnije kako možemo implementirati našu ideju, a ja ću ponuditi nekoliko opcija, od kojih svaka ima svoje prednosti. Za početak, želio bih napomenuti da je već duže vrijeme moguće da korisnici brzo skrolaju kroz bilo koju stranicu, i to u gotovo svakom pregledniku. Da biste to učinili, samo koristite gumbe "Page Up" i "Page Down" na tipkovnici računala.

Ali razumijete da čitatelji na našim web stranicama i blogovima imaju različite razine znanja i obuke. Moguće je da neki od njih zbog gore navedene inertnosti nisu ni svjesni takve ugodne opcije. Stoga, u okruženju intenzivne konkurencije, da biste privukli dodatnog posjetitelja, a time i potencijalnog pretplatnika na stranicu, morate osigurati sve mogućnosti koje će vas, makar i neznatno, podići u njihovim očima. Pa, sada idemo na praksu.

Prvo, želim ponuditi jednostavnu i besprijekornu ikonu na vrhu, koju možete instalirati bez ikakvih problema. Da biste to učinili, morate otvoriti za uređivanje datoteku footer.php WordPress teme, koja je, kao što znate, odgovorna za prikaz donjeg dijela web stranice, koji se naziva podnožje (ili podnožje), u pregledniku. Prije završne oznake tijela morate umetnuti sljedeći kod:

Dopustite mi da vas podsjetim da je najprikladniji način za uređivanje datoteka pomoću notepada plus plus (pročitajte više o ovom prekrasnom uređivaču HTML, PHP i CSS). Kako biste odredili lokaciju i izgled ikone "Povratak na vrh", postavite CSS svojstva za odgovarajući gotop id:

#gotop ( pozicija: fiksna; dno: 60px; margin-left: 1170px; border: 2px solid #BBB9C0; text-align: center; color: #4F487E; text-decoration: none; font-size: 24px; )

Kopirajte i dodajte ova svojstva u datoteku style.css teme WordPress (). Kao rezultat toga, u donjem desnom kutu trebala bi se pojaviti slika gumba "Natrag na vrh", koja će izgledati ovako:

U te svrhe možete koristiti već ugrađene slične alate u svim ostalim popularnim preglednicima: Opera (više o ovom pregledniku), Internet Explorer (o IE pregledniku), Google Chrome (članak o Chromeu). Da biste podigli samu sliku, recimo, morate povećati vrijednost svojstva bottom; da biste je pomaknuli ulijevo, trebate smanjiti CSS parametar svojstva margin-left. Pa, i tako dalje.

Sada zakomplicirajmo zadatak. U gornjoj verziji jednostavnog gornjeg gumba, on će biti vidljiv cijelo vrijeme, a kada kliknete na njega, web-stranica web stranice odmah se vraća na najvišu poziciju. Ali možete to učiniti tako da na vrhu stranice web stranice slika "gumba prema vrhu" bude nevidljiva i pojavit će se samo kada se pomaknete web stranicom prema dolje za određenu udaljenost. Između ostalog, možete osigurati glatko pomicanje. Svijetlo i ukusno.

Štoviše, za implementaciju ove opcije za stvaranje gumba na vrhu, sve predložene metode koje sam uspio pronaći na Internetu uključuju korištenje biblioteke jQuery na koju se morate povezati. Iz nekog razloga sam to želio izbjeći i na kraju sam pronašao željeni način da riješim ovaj problem. Poznati administrator WP-Kama predložio je svoj kod u JavaScriptu, koji omogućuje glatko pomicanje prema gore web stranice web stranice te pojavljivanje i nestajanje gumba "natrag na vrh" bez korištenja jQueryja. Najprije morate stvoriti datoteku na poslužitelju s ekstenzijom .js (na primjer, totop.js) i u nju umetnuti sljedeći dio:

(funkcija() ( funkcija $(id)( return document.getElementById(id); ) funkcija goTop(ubrzanje, vrijeme) ( ubrzanje = ubrzanje || 0.1; vrijeme = vrijeme || 12; var dx = 0; var dy = 0; var bx = 0; var wy = 0; ) if (document.body.scrollLeft || 0; by = document.scrollTop || ) var wx = window.scrollY ||. var x = Math.max(bx, dx)); var y = Math.max(by , dy)); var speed = 1 + ubrzanje window.scrollTo; (Math.floor(x / speed)); if(x > 0 || y > 0) ( var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")" window.setTimeout(invokeFunction, time return false) //* funkcija scrollTop())( var el = $("gotop"); var stop = (document.body.scrollTop || document.documentElement. scrollTop); if(stop>400)( if(el.style.display!="block")( el.style.display="block";

glatko neproziran (el, 0, 100, 1);

) ) else el.style.display="none";

Sada moramo stvoriti sliku za "gumb gore". Da biste to učinili, možete koristiti bilo koji grafički uređivač, uključujući preglednik fotografija FastStone Image Viewer (postoji detaljan priručnik o ovom zanimljivom programu). U te svrhe također možete koristiti, na primjer, Fotoshop, uključujući inačicu online aplikacija, kojih ima mnogo na Internetu.

Razumijem da bi neki neiskusni čitatelji mogli imati poteškoća ako žele dobiti lijepi gumb na vrhu, koji bi se također uklopio u dizajn. Stoga ću u jednoj od nadolazećih publikacija posvetiti vrijeme ovome i detaljno objasniti kako sam stvorio sličnu ikonu u obliku strelice prema gore za svoj blog u online Photoshopu. Za sada predstavljam gotov rezultat u obliku spritea, uključujući dva crteža:

Dopustite mi da ukratko objasnim da kombiniranje pozadinskih slika web mjesta u spriteove (na engleskom sprite - vila, duh) omogućuje smanjenje broja http zahtjeva, čime daje određeni doprinos plemenitom cilju smanjenja opterećenja na poslužitelju. U ovom slučaju stvaranje spritea od dvije strelice osigurava promjenu izgleda slike kada se na nju pomakne kursor miša, odnosno dolazi do efekta animacije.

Naravno, lako možete učiniti bez stvaranja spritea tako što ćete napraviti jedan crtež, ali razmatramo složeniju opciju za one koji to žele. Stoga, pristaše jednostavnije opcije mogu lako zamijeniti sprite jednom slikom. Cijeli ponuđeni algoritam bit će potpuno identičan.

Dakle, pretpostavit ćemo da je dizajn strelice "gore" spreman (usput, strelica se može zamijeniti drugom slikom, na primjer, u obliku lijepog gumba). Zatim postavljamo sliku na poslužitelj, opet u korijenu stranice (obično tamo već postoji mapa IMAGES). U te svrhe savjetujem vam da koristite program FileZilla (post o ovom FTP klijentu), koji je vrlo zgodan za premještanje i rad sa slikama, ili drugi sličan softver. Moj apsolutni put do slike s dvije strelice je sljedeći:

/images/totop.png

Međutim, za url slike koja se prikazuje pomoću CSS-a, također možete koristiti relativni put:

/images/totop.png

Koristite i apsolutne i relativne adrese, nema razlike. Imajte na umu da vaš puni URL može biti drugačiji. Pažljivo ispitajte ugniježđenost mapa, koje određuju sadržaj staze. Sljedeći korak je otvoriti datoteku footer.php i umetnuti sljedeću konstrukciju u nju na samom kraju prije završne oznake body:

Ne zaboravite zamijeniti "path_to_file" nizom svih mapa koje definiraju URL posebno za vaš projekt. I zadnji korak. Morate definirati CSS stilove koje treba dodati u datoteku style.css WordPress teme. Nudim svoju opciju:

#gotop ( pozicija: fiksna; dno: 60px; širina: 56px; visina: 96px; margin-lijevo: 1170px; pozadina: url(file_path/totop.png) no-repeat 0 0; )

I ovdje, kada opisujete svojstvo pozadine, ne zaboravite navesti stazu do datoteke totop.png (apsolutnu ili relativnu) kao url vrijednost. Imajte na umu da apsolutni put mora započeti s "http://". Kako bismo osigurali da se izgled gumba mijenja kada se kursor pomakne na njega, napisat ćemo još jedan uvjet u istoj datoteci style.css:

#gotop:hover ( pozadina: url(/path_to_file/totop.png) no-repeat -56px 0; )

Ali posljednje CSS pravilo treba dodati samo ako odlučite koristiti sprite. U slučaju jedne slike, nema potrebe registrirati je. Sada će se prilikom skrolanja stranice prema dolje postupno pojavljivati ​​gumb na vrh, kada prijeđete kursorom preko njega mijenjat će izgled (osim kada se učita jedna slika) i nakon klika na njega vraća se web stranica na gornji položaj i pomicanje će biti glatko. Za kraj, malo glazbene nostalgije: