Go to top of Page animat cu jQuery

Scris de bogdanmogo la data 23 Octombrie, 2009

Plecand de la scriptul dezvoltat de Ariel Flesler pentru a face smooth scroll pe o pagina, am construit un plugin pentru Wordpress, care sa faca acelasi lucru.

Pluginul poate fi customizat prin intermediul paginii de administrare, unde ii putem schimba interfata .css, dar si viteza de fading sau la ce height minim sa apara.

Instalare

Descarcam arhiva pluginului de aici si plasam fisierele in directorul /wp-contents/plugins/.

In lista de pluginuri vom gasi item-ul “Smooth GoToTop”, care trebuie activat.

Administrare

Pentru adaptarea temei pluginului la blogul tau vom folosi pagina de administrare. Pluginul se va gasi in Settings > Smooth GoToTop.

smoothgototop Selectarea unei teme de culori pentru text si background se poate face prin apasarea label-urilor din dreptul campurilor Text sau Background. Pentru stabilirea pozitiei pe ecran si a distantei fata de margini se folosesc campurile Position si Padding.

Configurarea in modul avansat

Pentru a configura distanta minima dupa care sa apara butonul de GoToTop, deschidem fisierul /jquery.top.js si mergem la linia 32.

................
$(document).ready(function() {
 
                   $('#top-link').topLink({
 
                       min: 400, // inaltimea minima dupa care sa apara butonul de GoToTop
                       fadeSpeed: 500 // viteza de fading
 
                   });
....

Daca dorim sa schimbam dimensiunea fontului sau chiar fontul o putem face modificand cateva linii in fisierul /gototop.php, incepand cu linia 45.

#top-link   {
 
                   display:none;
                   position:fixed;
                   right:5px;
                   bottom:5px;
                   height:18px;
                   color:#000000;
                   font-family: arial;
                   font-size:11px;
                   font-weight:bold;
                   text-decoration:none;
                   background:#90FF00; padding:5px;
 
}

Descarca plugin

Pluginul poate fi vazut aici.

Astept comentarii si bug-uri….

Postat în .css {}, .html, wordpress | 8 răspunsuri

8 răspunsuri la “Go to top of Page animat cu jQuery”

Tweets that mention Go to top of Page animat cu jQuery | mogosanu.ro -- Topsy.com says:

25-10-2009 at 10:29

[...] This post was mentioned on Twitter by Loredana Pascal, Mogosanu Bogdan. Mogosanu Bogdan said: Am creat un plugin wordpress pentru Smooth GoToTop of Page … Folositi-=l cu incredere. Astept feedback http://bit.ly/1E8mXn [...]
Dana says:

26-10-2009 at 10:44

mda….interesant, dar sunt bloggeri care nu au terminat automatica.
eu de ex sunt pe business marketing, economic, financiar…….imi e destul de greu sa inteleg limbajul tau, de fapt, configurarea in mod avansat.
sa inteleg ca nu e pentru oricine mesajul tau?
rAuLiTo says:

26-10-2009 at 15:53

Nu l-am încercat încă niciodată, dar îl voi instala azi. Nu cred să aibă ceva buguri, după demoul care l-am văzut, e foarte ok.
E foarte util plugin-ul.
bogdanmogo says:

26-10-2009 at 20:57

@raulito – astept rezultatul instalarii
@Dana – poate ai citit Configurarea in modul avansat. Citeste despre instalare & administrare.
Iosif says:

03-11-2009 at 20:21

comentez si eu numai sa fie comentat ! sincer ? nu am idee…..sunt super incepator !
da am o intrebare va rog ! stiti cumva de ce daca vreau sa urc o poza intr-o postare noua sau un video nu ma lasa ? i-mi apare cica : try again !
asta de vreo 2 saptamani…….
va rog daca stiti care sa ma ajutati !
mersi si salutari all !
7 ‘Scroll to Top’ jQuery Solutions says:

21-02-2010 at 23:27

[...] 7. Smooth GoToTop Wordpress plugin [...]
Solociones jQuery para hacer un Scroll-top. « Blog de Diseño Web says:

23-02-2010 at 11:31

[...] Plugin para WordPress – fuente Mogosanu.ro. Descarga el plugin e instálalo en tu WordPress. [...]
Web Resources » 7 λύσεις για ‘Scroll To Top’ με jQuery says:

06-03-2010 at 16:30

[...] Ομαλό Go to Top Wordpress plugin [...]