Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in één van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Naar de bovenkant toe scrollen

Vorige onderwerp Volgende onderwerp Go down

Naar de bovenkant toe scrollen

Bericht van kiekeboe op wo 9 maa 2011 - 11:58

Naar de bovenkant toe scrollen

Hallo!

Hier is een tutorial over hoe je een scroller laat verschijnen, die je weer terug naar de top brengt. Voor een voorbeeld, scroll hier een stuk naar onder, dan zal rechtsonder in het beeld een pijltje verschijnen waar je op kan klikken.

De tutorial
Allereerst beginnen we met een mooi icoontje uit te zoeken dat ons straks naar boven zal brengen. Hier zijn er een paar:

Directe link:
Code:
http://icons.iconarchive.com/icons/pixelmixer/basic-2/48/arrow-up-icon.png

Directe link:
Code:
http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/48/navigate-up-icon.png

Directe link:
Code:
http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-4/48/upload-icon.png

Directe link:
Code:
http://icons.iconarchive.com/icons/visualpharm/must-have/48/Stock-Index-Up-icon.png

Directe link:
Code:
http://icons.iconarchive.com/icons/pixelmixer/basic/48/up-icon.png

Directe link:
Code:
http://icons.iconarchive.com/icons/mattahan/umicons/48/Arrow-icon.png

Daarna gaan we een nieuwe HTML pagina te maken. Ga naar:
Beheerderspaneel--->Modules--->Javascript Code beheer--->Create a new javascript
Zorg als plaatsing dat het op alle pagina's werkt.
Kies uit bovenstaand overzichtje een mooie pijl uit, en pak daarvan de Directe link.

Pak nu dit script:
Code:
$(document).ready(function(){
 jQuery('body').append('<a href="#" class="scrollToTop" style="position:fixed; bottom:25px; right:20px; display:none;"><img src="http://www.dynamicdrive.com/dynamicindex3/up.png" /></a>');

 //Check to see if the window is top if not then display button
 $(window).scroll(function(){
 if ($(this).scrollTop() > 100) {
 $('.scrollToTop').fadeIn();
 } else {
 $('.scrollToTop').fadeOut();
 }
 });
 
 //Click event to scroll to top
 $('.scrollToTop').click(function(){
 $('html, body').animate({scrollTop : 0},800);
 return false;
 });
 
});

Zoek daar deze link op:
http://www.dynamicdrive.com/dynamicindex3/up.png
Verwijder die en plak op precies dezelfde plaats jouw directe link naar keuze.

Dan is het script klaar. Kopieer het script en plak het in het javascriptvakje. Klik dan op verzenden.



Laatst aangepast door kiekeboe op wo 9 maa 2011 - 20:41; in totaal 1 keer bewerkt


Dream Horses

kiekeboe
Actief Forumlid

Vrouw Aantal berichten : 406
Leeftijd : 21
Locatie : Maastricht
Registratiedatum : 18-10-08

Profiel bekijken http://dreamhorses.biz
kiekeboe is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum