jQuery - Naar element scrollen


In een andere tip zie je hoe je met jQuery het zo kan maken dat er met een effect 'Terug naar boven' wordt gescrolld. Op een vergelijkbare manier kan er ook met een effect worden gescrolld naar een bepaald element. Normaal zou je hiervoor HTML bladwijzers gebruiken waarmee een bezoeker naar een specifiek gedeelte op de pagina kan springen. Middels de onderstaande code kan dit met een klein effect gedaan worden.

Plaats als eerste de onderstaande functie.

function goToByScroll(id){
        $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
        //$('html,body').animate({scrollTop: jQuery("#"+id).offset().top -150},'slow');
}


Dit gaat op basis van ID, plaats dan op de pagina een link met het ID van het element.

<a href="javascript:void(0)" onClick="goToByScroll('down')">Scroll</a>

Scrollen na laden pagina

Door de onderstaande code te gebruiken kan er ook direct na het laden van de pagina met een klein effect worden gescrolld naar een bepaald element wederom op basis van ID.

$(document).ready(function() {
        $('html,body').animate({scrollTop: $("#slide").offset().top},3000);
});

In element scrollen

Aanvullend kun je bijvoorbeeld ook binnen een element zoals een DIV naar beneden scrollen. In het onderstaande geval kom je automatisch onderin het element terecht.

$(document).ready(function() {
        $('#textarea_1').scrollTop($('#textarea_1')[0].scrollHeight);
});