# 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.
{% 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 %}
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('naar top
');
});
```
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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://1itf.gitbook.io/jquery/7-animaties-en-effecten/toepassing-1-vloeiend-scrollen.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.