Anchor
Tue Dec 06 2022 13:39:07 GMT+0000 (Coordinated Universal Time)
HTML /////
<main id="ldgHUB">
ldg-nav--item-current
<section class="ldg-title">
<div class="ldg-title--content">
<h2>Organiser ses <strong> premières<br /> sorties </strong></h2>
<p>Découvertes en vue ! Comment éveiller votre bébé au monde extérieur, tout en lui offrant confort et protection ? C’est ici !</p>
<ul>
<li><a data-attr="BC-premieres-sorties-cta-en-hiver" href="#" data-anchor="winter">En hiver</a></li>
<li><a data-attr="BC-premieres-sorties-cta-en-ete" href="#" data-anchor="summer">En été</a></li>
<li><a data-attr="BC-premieres-sorties-cta-en-toute-saison" href="#" data-anchor="seasons">En toute saison</a></li>
</ul>
</div>
JS /////
var OkLdg = function () {
return {
//
// Init
//
init: function () {
OkLdg.Nav();
OkLdg.Anchors.init();
},
//
// Nav
//
Nav: function () {
let navList = document.querySelector('#ldgHUB .ldg-nav ol');
let current = navList.querySelector('.ldg-nav--item.ldg-nav--item-current');
if (current) {
let rect = current.getBoundingClientRect();
navList.scroll({
left : rect.left,
top : 0,
behavior : 'smooth'
});
}
},
//
// Anchors
//
Anchors: function () {
return {
init: function () {
let anchors = document.querySelectorAll('a[data-anchor]');
anchors.forEach(anchor => {
anchor.addEventListener('click', e => {
e.preventDefault();
let target = anchor.getAttribute('data-anchor');
OkLdg.Anchors.goTo(target);
});
})
},
goTo: function (pTarget) {
let target = document.querySelector(`.ldg-article--container[data-anchor="${pTarget}"]`);
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
}
};
}()
};
}();
document.addEventListener('DOMContentLoaded', function () {
OkLdg.init();
});



Comments