Uncaught ReferenceError: onScroll is not defined

Bonjour,

J'ai un problème sur ce script avec la propriété onScroll le déboguer me dit qu'elle n'est pas définie (sous wordpress) alors que sur une page html, cela fonctionne bien.
Je vous remercie de votre aide.

Code pour Wordpress avec l'erreur "Uncaught ReferenceError: onScroll is not defined":

Code :

(function($){
    $(document).ready(function () {
        $(document).on("scroll", onScroll);
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $(document).off("scroll");

            $('a').each(function () {
                $(this).removeClass('link-active');
            })
            $(this).addClass('link-active');

            var target = this.hash,
            menu = target;
            $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });
})(jQuery);

Code sur ma page html qui fonctionne bien:
Code :

$(document).ready(function () {
            $(document).on("scroll", onScroll);

    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('link-active');
        })
        $(this).addClass('link-active');

        var target = this.hash,
        menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

        function onScroll(event){
            var scrollPos = $(document).scrollTop();
            $('#top-menu a').each(function () {
                var currLink = $(this);
                var refElement = $(currLink.attr("href"));
                if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                    $('#top-menu li a').removeClass("link-active");
                    currLink.addClass("link-active");
                }
                else{
                    currLink.removeClass("link-active");
                }
            });
        }

Je vous remercie de me mettre sur la voie.
Modifié par baraton (20 Aug 2019 - 15:47)

Salut,

Pourquoi tu n'as pas de fonction onScroll de défini dans le premier code comme tu l'as fais dans le second ?

C'est un oubli de copier/coller et le voici en entier:

(function($){
	function onScroll(event){
		var scrollPos = $(document).scrollTop();
		$('#top-menu #menu-item-28661 a').each(function () {
			var currLink = $(this);
			var refElement = $(currLink.attr("href"));
			if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
				$('#top-menu #menu-item-28661 a').removeClass("link-active");
				currLink.addClass("link-active");
			}
			else{
				currLink.removeClass("link-active");
			}
		});
	}
})(jQuery);

(function($){
	$(document).ready(function () {
		$(document).on("scroll", onScroll);
		$('a[href^="#"]').on('click', function (e) {
			e.preventDefault();
			$(document).off("scroll");

			$('a').each(function () {
				$(this).removeClass('link-active');
			})
			$(this).addClass('link-active');

			var target = this.hash,
			menu = target;
			$target = $(target);
			$('html, body').stop().animate({
				'scrollTop': $target.offset().top+2
			}, 500, 'swing', function () {
				window.location.hash = target;
				$(document).on("scroll", onScroll);
			});
		});
	});
})(jQuery);

Ola,

Autre question pourquoi tu sépares la fonction du reste dans une autre déclaration

(function($){ ... })(jQuery);

? Si tu copie-colle en une seule fois le même code qui marche dans une seule déclaration, avec la fonction ça a l'air de marcher.


Et juste pour ma culture : pourquoi utiliser ici

(function($){ ... })(jQuery);

au lieu de seulement

$(function(){ ... });

?

https://www.sitepoint.com/5-ways-declare-functions-jquery/
Modifié par _laurent (22 Aug 2019 - 10:23)