CSS soepel scrollen naar interne links met behulp van jQuery

Om op een webpagina soepel te laten scrollen naar een interne link (#) is een tip van Paulund makkelijk te implementeren.

Even stukje HTML code als demonstratie:

 

HTML code:

<a href="#services">Jump to services</a>
<div id="services">
</div>

 

En dan nu nog styling aanpassen in CSS die ervoor nodig is:

 

CSS code:

 

<!-- linking scripts -->
<script src="_js/jquery.js" type="text/javascript" charset="utf-8"></script> <!-- jquery 1.8.3 -->
<script src="_js/core.js" type="text/javascript" charset="utf-8"></script> <!-- smooth scroll to internal links-->

 

En het belangrijkste, zorg dat jquery geladen is en voor het soepel laten scrollen gebruik de volgende code in bijvoorbeeld mapje _js aanwezig is:

 

Core.js

 

$(document).ready(function(){

$(‘a[href^=”#”]’).on(‘click’,function (e) {

e.preventDefault();

var target = this.hash,

$target = $(target);

$(‘html, body’).stop().animate({

‘scrollTop’: $target.offset().top

}, 900, ‘swing’, function () {

window.location.hash = target;

});

});

});

Damiaan van Vliet on FacebookDamiaan van Vliet on Linkedin
Damiaan van Vliet
Damiaan van Vliet is WordPress front-end developer bij Albus Webdesign. Hij heeft meer dan 25 jaar ervaring in de ICT sector. Zijn kernwaarden zijn geduldig, doelgericht en gestructureerd. Hij stemt zichzelf af op de wensen van de klant en houdt de zaken eenvoudig waar dat kan.

Een reactie plaatsen