Pagina scrollen met jQuery

Een pagina scrollen met jQuery is vrij eenvoudig. Hierbij springt de pagina niet in één keer naar de plek toe waar deze heen wordt verwezen, maar je ziet de pagina echt naar benenden gaan. Klik hier voor het voorbeeld

Klik hier voor het voorbeeld

Scroll naar de uitleg over deze code

Met jQuery is dit effect vrij eenvoudig te bereiken met behulp van animate. Hiermee kun je een element gelijdelijk aanpassen, bijvoorbeeld de hoogte. In ons geval wordt de scrollTop aangepast. Dit is de waarde hoever de pagina gescrolled is. De code zal er dan zo uitzien:

  1. $( function () {
  2.         $(".scroll").click( function () {
  3.                
  4.                 $('html, body').animate({
  5.                         scrollTop: 1500
  6.                 });
  7.                
  8.                 return false;
  9.         });
  10. });

Hiermee wordt er 1500 pixels naar beneden gescrolled. Dit is vanaf het begin van de pagina. Wil je naar bijvoorbeeld een div element springen? Dat kun je eenvoudig doen door de top positie van het element op te vragen:

  1. $( function () {
  2.         $(".scroll").click( function () {
  3.                
  4.                 $('html, body').animate({
  5.                         scrollTop: $("div").offset().top
  6.                 });
  7.                
  8.                 return false;
  9.         });
  10. });

De code regel voor regel uitgelegd:

Wanneer er op een element gelikt wordt met de class scroll de code tussen function () { en } uitvoeren

  1. $(".scroll").click( function () {
  2.  
  3. });

Dit stukje zorgt ervoor dat de pagina soepel naar beneden glijdt met behulp van de animate functie. Hier worden de element html en body geselecteerd, hier zit namelijk de eigenschap scrollTop aan gekoppeld. Wanneer je een div met een overflow wilt laten scrollen moet je uiteraard deze div selecteren.

  1. $('html, body').animate({
  2.  
  3. });

Deze code doet het echte werkt, hier wordt namelijk de waarde van scrollTop aangepast. In dit geval wordt er naar een div element gescrolled. Omdat je niet altijd precies de positie weet van het element, kan deze worden opgevraagd met offset().top. Zodoende weet het systeem precies waar het heen moet gaan, en wanneer je later wat aan je pagina wijzigt hoef je niet alle waardes te veranderen.

  1. scrollTop: $("div").offset().top

Overigens is er ook een plugin beschikbaar om het scrollen van elementen eenvoudiger te maken, de scrollTo plugin. Deze plugin maakt het onder andere mogelijk om horizontaal te scrollen, naar een element te scrollen of bijvoorbeeld een easing te gebruiken.