<script>
(function () {
// Javascript scroll to anchor other page v3 code via helpmij van bron
// invullen: classname (zonder punt) van het actieve menu item
var currentClass = "active-section";
// invullen: selecteer alle <a> menu items voor de secties (css selector)
var menuItems = document.querySelectorAll("#stickymenu a");
// invullen: één item is standaard `currentClass` (css selector)
var defaultItem = document.querySelector("#stickymenu a:first-child");
// hash gedeelte in de url, bijv. #sectie02
var hash = window.location.hash;
if (hash == '#sectie01') {
document.getElementById("sectie01").scrollIntoView();
window.scrollTo(0, 40);
} else if (hash == '#sectie02') {
document.getElementById("sectie02").scrollIntoView();
window.scrollTo(0, 40);
} else if (hash == '#sectie03') {
document.getElementById("sectie03").scrollIntoView();
window.scrollTo(0, 40);
} else {
// geen hash, dan naar default sectie
document.getElementById("sectie01").scrollIntoView();
window.scrollTo(0, 40);
}
if (hash != '' && hash != '#') {
// doorloop alle menu items
menuItems.forEach(function(item, index) {
// waar staat de # in de href
var n = item.href.indexOf('#');
// geef class `currentClass` als hash hetzelfde is
if (item.href.substr(n) == hash) {
item.classList.add(currentClass);
}
});
} else {
// geen hash in de url, zet dan default item actief.
defaultItem.classList.add(currentClass);
}
// doorloop alle menu items
menuItems.forEach(function(item, index) {
// zet een `click` event op elke menu item
item.addEventListener("click", function(event) {
// verwijder bij alle menu items de `currentClass`
menuItems.forEach(function(item, index) {
item.classList.remove(currentClass);
});
// zet een `currentClass` op het geklikte item
this.classList.add(currentClass);
});
});
// ...........
});
console.log(hash)
})();
</script>