I made a theme for Wordpress, using Swup and Locomotive js. When I see the theme page, it is half loaded. It doesn't scroll to the footer. If I refresh the page then I see it perfectly. I'll give you the code Thank you all
jQuery(function($) {
const options = {
animateHistoryBrowsing: false,
animationSelector: '[class*="transition-"]',
containers: ["#swup"],
cache: true,
plugins: [new SwupBodyClassPlugin(), new SwupHeadPlugin()],
linkSelector:
'a[href^="' +
window.location.origin +
'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-
no-
swup])',
skipPopStateHandling: function(event) {
if (event.state && event.state.source == "swup") {
return false;
}
return true;
}
};
const swup = new Swup(options);
document.addEventListener('swup:contentReplaced', (event) => {
$('.header__menu').removeClass('header__menu--open');
$('.icon-hamburger').removeClass('icon-hamburger--open');
$(".search-panel").removeClass("search-panel--open");
$(".search-button").removeClass("search-button--active");
});
document.addEventListener('swup:transitionEnd', (event) => {
scroll.init();
scrollDetect();
});
document.addEventListener('swup:willReplaceContent', (event) => {
scroll.destroy();
});
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
scroll.stop();
This is scroll detected
function scrollDetect(){
$('.d-scroll').attr('data-scroll');
scroll.on('scroll', func => {
var scroll_pos = 0;
scroll_pos = scroll.scroll.instance.scroll.y;
body_el = document.body;
if(scroll_pos > 600) {
body_el.classList.add( "scroll-down" );
} else {
body_el.classList.remove( "scroll-down" );
}
});
}
scrollDetect();