fbpx

Tutorial

Elementor Smooth Scroll allow for header updated with Pure JS

Uses Plugins

Elementor PRO

Description

This code disabled the Elementor Smooth Scroll and implements our own so that we can allow for absolute headers.

Steps

Code (click to copy)

JavaScript (javascript)


;((w,d)=>{
    w.addEventListener( 'elementor/frontend/init', ()=> {
        if ( typeof elementorFrontend === 'undefined' ) {
            return;
        }
        elementorFrontend.on( 'components:init', ()=>{
            elementorFrontend.utils.anchors.setSettings( 'selectors.targets', '.dummy-selector' );
        });
    });
        
    w.addEventListener('load', ()=>{
        const topOffset = 250;
        const hashLinks = d.querySelectorAll('[href*="#"]');
        hashLinks.forEach(el=>{
            el.addEventListener('click', (e)=>{
                e.preventDefault();
                const {currentTarget} = e;
                const scrollTarget = d.querySelector(currentTarget.hash);
                const top = scrollTarget.getBoundingClientRect().top + d.body.scrollTop - topOffset;
                
                w.scroll(
                    {
                        top: top,
                        left: 0,
                        behavior: 'smooth'
                    }
                ); 
            })
        });
    })
})(window, document)