Ákos mai cikkéből megtudhatjuk, hogyan készíthetünk "Ugrás a weboldal tetejére" linket weboldalunkra!
Lebegő oldal tetejére hivatkozást CSS-el könnyen lehet készíteni.
A következő megoldással több interaktivitást valósíthatunk meg. Az oldal tetejére ugrás csak akkor jelenik meg, ha az oldalt elkezdjük lefelé görgetni, és eltűnik, ha a tetejére érünk.
A megoldás IE8-tól működik, Firefox új verzióiban és a Safariban szintén működik, a Chrome-ban azonban sajnos nem funkcionál.
Az effektet JQuery segítségével valósíthatjuk meg.
Demó oldal a működésről:
http://verpletterend.nl/experiments/totop/
Nézzük lépésenként!
1. A Java scriptek beszerzése
- · A JQuery letöltése:
http://docs.jquery.com/Downloading_jQuery ( A hivatkozás mentése más néven. )
jquery-1.8.0.min.js
- · jQuery To Top letöltése:
http://forrst.com/posts/Animated_jQuery_Back_to_top_plugin-giM
A teljes script-et ki kell jelölni, és egy szövegfájlba elmenteni, a kiterjeszésnek pedig figyelem .js –nek kell lennie.
Mi az állományt jquery-toTop.js ként mentjük el.
2. Kép elkészítése
Az ugrási lehetőség megjelenítéséhez képet használunk, ez jelenik meg.
3. Alkalmazás az oldalon
A készülő oldalba készítettünk egy script mappát, és a javascript fájlokat ide mentettük.
A használathoz a következő kódot kell a html <BODY> részébe másolni:
<script src="script/jquery-1.8.0.min.js"></script>
<script src="script/jquery-toTop.js"></script>
<script>
$.toTop({
css: {
border: '1px dotted gray',
padding: 5
},
image: 'images/toTop.png'
});
</script>
Az alkalmazásnál a hivatkozási útvonalakra figyelni kell, és aktualizálni kell a scripteket, valamint a képet is.
4. Személyre szabás
Már működik is.
A html-be illesztett kód css: { . . . }, résznél css- beállításokat kell alkalmazni.
A sorokat vesszővel le kell zárni, kivéve az utolsót.
top,left,margin, stb, width, height
Az eltűnés sebességét pedig:
scrollSpeed: 200
az image:…. részhez is kell tenni vesszőt, ha használjuk, és fontos, hogy }); jelek elé tegyük.
Forrás: http://forrst.com/posts/Animated_jQuery_Back_to_top_plugin-giM#
Legyen profi a webdesign-ban, és a php-webprogramozásban, és legyen ott az október második felében induló Akkreditált Webprogramozó Mester, és
Akkreditált Web Artist (Webdesigner és Webprogramozó tanfolyam egyben) képzéseinken!
Jelentkezzen az induló októberi csoportokba legkésőbb október 15-ig!!!
Várjuk szeretettel szeptemberi informatika tanfolyamainkra!
NetlogiC School Informatika Szakképző Iskola
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net
