WordPress : $.scrollTo ne fonctionne pas dans Chrome

J’ai créé un site WordPress simple avec un thème appelé OneEngine.

Voici un lien de démonstration : https://oneengine.enginethemes.com/

Fait intéressant, dans Chrome, la navigation ne semble pas fonctionner.

J’ai identifié le morceau de script responsable du défilement.

// SCROLL TO
$('#main-menu-top a,ul.slicknav_nav li a').click(function(event){
    event.stopPropagation();
    event.preventDefault();

    console.log('Click event');

    if($(this).hasClass('active'))
        return;

    $('#main-menu-top a').removeClass('active').css('border-bottom-color', 'none');

    $('ul.slicknav_nav li a').removeClass('active');

    $(this).addClass('active');

    if(this.hash == "#home")
        $.scrollTo(0,800);
    else
        $.scrollTo( this.hash, 800, {offset:-$(".sticky-wrapper").height()});

    var bgcolor = $(this.hash).find('span.line-title').css('backgroundColor');

    $(this).css('border-bottom-color', bgcolor);

    $('.slicknav_nav').hide('normal', function() {

        $(this).addClass('slicknav_hidden');

    });

    $('a.slicknav_btn').removeClass('slicknav_open').addClass('slicknav_collapsed');

    return false;
});

$("a#scroll_to").click(function(event) {
    $.scrollTo("#header", 800);
});

Je suis convaincu que la partie qui ne fonctionne pas est $.scrollTo();. En tapant ceci dans Google window.scrollTo, j’ai changé chaque instance en window.scrollTo()mais cela a donné des ancres nerveuses sans décalage.

Cette section offset:-$(".sticky-wrapper").height()que je connais est à peu près similaire à:

var stickyWrapperHeight = $(".sticky-wrapper").height()(ce qui fait 76 pixels).

Je ne trouve pas réellement de méthode scrollTo native telle que décrite, donc je pense qu’il peut s’agir en fait de JQuery scrollTo – https://github.com/flesler/jquery.scrollTo

Ma plus grande question serait pourquoi cela ne fonctionne-t-il pas dans Chrome ?

J’ai vu des alternatives potentielles telles que les suivantes :

$("a").on('click', function(event) {

        console.log($(".sticky-wrapper").height())

        var height = $(".sticky-wrapper").height();

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });

Est-ce que j’utilise simplement une version obsolète de scrollTo()?

Solution n°1 trouvée

Même s’ils ont des problèmes SSL sur leur page de démonstration et que vous obtenez « $ » n’est pas une fonction si vous ne tapez pas jQuery() à la place. J’ai remarqué que cela ne fonctionne toujours pas même lorsque vous essayez d’utiliser le plugin directement dans la console.

La version de scrollTo qu’ils utilisent dans le thème est obsolète et est également connue pour ne pas fonctionner dans les versions récentes de chrome :

https://github.com/flesler/jquery.scrollTo/issues/164

Essayez avec la dernière version, ça devrait marcher.

Sinon, si pour une raison quelconque vous ne pouvez pas mettre à jour le plugin, vous pouvez le faire fonctionner en utilisant quelque chose comme ceci :

jQuery('html,body').animate({scrollTop: jQuery("#skills").offset().top}, 'slow');