> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/7-animaties-en-effecten/toepassing-1-vloeiend-scrollen.md).

# Toepassing 1: vloeiend scrollen

{% hint style="success" %}
★ Open **animaties/toep\_scroll.html**.\
★ Test de links in een browser.
{% endhint %}

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.

![](/files/-L9sGpMYazJX5F3LnrEl)

{% hint style="success" %}
★ Pas het script als volgt aan.
{% endhint %}

```javascript
$(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.

{% hint style="success" %}
★ Bewaar de pagina en test de links in een browser. (Geen enkele link werkt nog.)\
★ Voeg nu de animatie toe.
{% endhint %}

```javascript
$(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`.

{% hint style="success" %}
★ Bewaar de pagina en test de animaties in een browser.\
★ Plaats op de titels binnen de section-tag een link naar anker **#top**.
{% endhint %}

```javascript
$(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.

{% hint style="success" %}
★ Bewaar de pagina en test de links op de h2-tags in een browser.
{% endhint %}

![](/files/-L9sGqATiyZOfGD7Bf0l)

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.

{% hint style="success" %}
★ Plaats **op de titels** aan het einde van elke section-tag een link naar anker **#top**.
{% endhint %}

```javascript
$(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.

{% hint style="success" %}
★ Bewaar de pagina en test de geïnjecteerde links in een browser.
{% endhint %}

![](/files/-L9sGqTYaDUxdVAWXGsQ)