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;

});

});

});