Anchor
Tue Dec 06 2022 13:39:07 GMT+0000 (UTC)
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