WordPress : $.scrollTo ne fonctionne pas dans Chrome

Publié par Jean-Michel le

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.

Lire également:  Wordpress : Changer le thème WordPress Bootstrap sans modifier le php

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.

Lire également:  Wordpress : Désactiver la soumission du formulaire de contact 7

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');
Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *