Anchor

PHOTO EMBED

Tue Dec 06 2022 13:39:07 GMT+0000 (Coordinated Universal Time)

Saved by @Remzos #jquery

HTML /////
<main id="ldgHUB">
    ldg-nav--item-current

	<section class="ldg-title">
		<div class="ldg-title--content">
			<h2>Organiser ses <strong> premi&egrave;res<br /> sorties </strong></h2>
			<p>D&eacute;couvertes en vue&nbsp;! Comment &eacute;veiller votre b&eacute;b&eacute; au monde ext&eacute;rieur, tout en lui offrant confort et protection&nbsp;? C&rsquo;est ici&nbsp;!</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 &eacute;t&eacute;</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();
});
content_copyCOPY