Naar de bovenkant toe scrollen

Vorige onderwerp Volgende onderwerp Ga naar beneden

Tutorial Naar de bovenkant toe scrollen

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

Voeg de "Omhoog / Omlaag" knoppen toe

Hier is een tutorial in 2 delen over hoe je knoppen laat verschijnen, die je weer terug naar de top of de bodem brengen. In het eerste deel leer je hoe je een enkele knop "omhoog" kan maken, in het tweede deel leer je hoe je tegelijkertijd een "omhoog" en een "omlaag" knop kunt maken. Kies één van beide methodes, gebruik ze niet tegelijkertijd want dit kan fouten in de weergave van je pagina's veroorzaken!!

1. Knop voor "omhoog" scrollen


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

Kies uit bovenstaand overzichtje een mooie pijl uit, en kopieer daarvan straks de Directe link om die in het javascript te zetten.

Javascript maken



Nu gaan we een nieuw javascript aanmaken. Ga naar:
Beheerderspaneel Modules Javascript Code beheer Create a new javascript

Titel: naar eigen keus.
Plaatsing: op alle pagina's.

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;
 });
 
});
Kopieer het script en plak het in het javascriptvakje.
Zoek daar dan deze link op:
http://www.dynamicdrive.com/dynamicindex3/up.png
Verwijder die en plak op precies dezelfde plaats de directe link naar jouw gekozen pijl.

Dan is het script klaar.  Klik dan op verzenden.

2. Maak "Omhoog / Omlaag" knoppen


Met deze scripts kunt u twee knoppen aan de boven- of onderkant van de pagina op alle pagina's van uw forum plaatsen:

Script maken


Ga naar:
Beheervenster Modules HTML & JAVASCRIPT Javascript-codebeheer

Zorg dat het Javascript-codebeheer is ingeschakeld en maak een nieuw javascript aan:
Titel: Omhoog / omlaag knop
Plaatsing: op alle pagina's

Voer de volgende code in:
Code:
$(function(){
          $("body").append('<div class="boutonhautbas"><a href="#top"><img src="https://i.imgur.com/hkOmuCD.png" alt="Aller en haut" /></a> <a href="#bottom"><img src="https://i.imgur.com/G3Io37u.png" alt="Aller en bas" /></a></div>');
});
Als u wilt, vervangt u de URL van de afbeeldingen door uw eigen afbeeldingen :
- https://i.imgur.com/hkOmuCD.png
- https://i.imgur.com/G3Io37u.png

CSS toevoegen (knopplaatsing)


Ga naar:
Beheerderspaneel Display Kleuren  CSS Style Sheet tab

Voeg deze code in uw css stijlblad in:
Code:
.boutonhautbas {
    bottom: 40px;
    right: 10px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;
}

Dit was het, veel plezier ermee.


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

kiekeboe
Actief Forumlid

Vrouw Aantal berichten : 406
Geboortedatum : 20-10-95
Leeftijd : 23
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