Toepassing 1: vloeiend scrollen

★ Open animaties/toep_scroll.html. ★ Test de links in een browser.

De navigatie bovenaan verwijst met een ankerlink naar een bepaalde plaats in de pagina. In deze toepassing gaan we de overgangen via een animatie vloeiend laten verlopen. Daarna gaan we onderaan elke section-tag dynamisch een extra link toevoegen die naar het anker verwijst dat net voor het navigatieblok staat.

★ Pas het script als volgt aan.

$(function() {
    $('#scrollNav a').click(function(e){
        e.preventDefault();
    });
});

De callback functie van het click-event geeft het event zelf als parameter terug (aangeduid met de parameter e). De methode e.preventDefault() zorgt ervoor dat we de normale werking van de links uitschakelen. In de volgende stap wordt de link immers vervangen door een scroll-effect.

★ Bewaar de pagina en test de links in een browser. (Geen enkele link werkt nog.) ★ Voeg nu de animatie toe.

$(function() {
    $('#scrollNav a').click(function(e){ 
        e.preventDefault();
        var anker = $(this).attr('href');
        var ankerOffset = $(anker).offset().top;
        $('html, body').animate({scrollTop:ankerOffset}, 500);
    });
});

Eerst lezen we de waarde van het link-attribuut href uit en plaatsen deze in de variabele anker. De variabele ankerOffset bevat de afstand van het gekozen anker ten opzichte van de browserrand. De methode offset() geeft ons de afstand van de selector ten opzichte van het document. offset() is op zich een object met twee properties, namelijk left en top. Om de juiste afstand tot de bovenrand te kennen, gebruiken we dus offset().top.

★ Bewaar de pagina en test de animaties in een browser. ★ Plaats op de titels binnen de section-tag een link naar anker #top.

$(function() {
    ...
    $('section > h2').css('cursor', 'pointer')
        .attr('title', 'Scroll naar top')
        .click(function(){
            var topOffset = $('#top').offset().top;
            $('html, body').animate({scrollTop:topOffset}, 200);
    });
});

De selector $('section > h2') gaat op zoek naar elke h2-tag die zich op het eerste niveau binnen de section-tag bevindt. Om de gebruiker te tonen dat de h2-tag een link wordt, gaan we de cursor aanpassen met .css('cursor', 'pointer') en krijgt de link een tooltip via .attr('title', 'Scroll naar top'). Daarna volgt het click-event. De code achter het click-event is bijna identiek aan de code van de links uit voorgaande functie.

★ Bewaar de pagina en test de links op de h2-tags in een browser.

Als laatste gaan we nog een extra tekstlink toevoegen. Hiervoor gaan we extra HTML-code genereren die we dynamisch op het einde van elke sectie injecteren.

★ Plaats op de titels aan het einde van elke section-tag een link naar anker #top.

$(function() {
    ...
    $('section').append('<p><a href="#top">naar top</a></p>');
});

De methode append('...') voegt net voor de eindtag van section een nieuwe paragraaf met een link toe. Ook deze methode wordt later nog in detail besproken.

★ Bewaar de pagina en test de geïnjecteerde links in een browser.