Comment puis-je ajouter des animations de défilement spécifiques aux liens, horizontales et verticales, à l'aide de jQuery?

Question

J'ai ce script sur mon site Web :

$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }

  $('[href*=#]').each(function() {
    if ( (filterPath(location.pathname) == filterPath(this.pathname))
      && (location.hostname == this.hostname)
      && (this.hash.replace(/#/,'')) ) {

      var $targetId = $(this.hash), 
        $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length 
        ? $targetId 
        : $targetAnchor.length ? $targetAnchor : false;
      if ($target) {

        var divOffset = $target.parent().offset().top;
        var pOffset = $target.offset().top;
        var pScroll = pOffset - divOffset;

        $(this).click(function() {
          $target.parent().animate({scrollTop: pScroll + 'px'}, 600);
          return false;
        });
      }
    }
  }); 
});

Cela fonctionne bien et fait défiler la navigation principale vers le haut, le bas, etc., mais je souhaite que le div dans la section services défile de gauche à droite. Je souhaite également ajouter un curseur à la section portfolio, mais le code ci-dessus règle tout code supplémentaire tel qu'il s'applique à toutes les balises <a href...>. Comment puis-je le spécifier uniquement dans le mainnav ul?

merci d'avance

Answer 1

Modifiez le sélecteur de '[href * = #]' à 'ul.mainnav [href * = #]'.

Comment écrire des sélecteurs qui ne vous donnent que les éléments que vous voulez est probablement la chose la plus importante à savoir lors de l’utilisation de jQuery. Je ne peux que recommander la lecture de la documentation jQuery sur les sélecteurs (mais les autres éléments sont également recommandés).

Answer 2

Supposons que vous ayez la structure suivante et que vous souhaitiez appliquer une fonction uniquement à & "foo &"; lien. Et laissez tous les autres intacts.

<div id="mainnav">
  <ul>
    <li>
      <a href="#">foo</a>
    </li>
    <li>
      <a href="http://www.example.com">foo2</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">foo3</a>
    </li>
  </ul>
  <a href="#">foobar</a>
</div>

Vous pouvez ensuite utiliser une telle sélection jQuery

$("#mainnav > ul:first").find("a[href*=#]").css('color','red');

Brisé en morceaux

$("#mainnav > ul:first")
//give me the element with id mainnav and then the first ul child element of it

.find("a[href*=#]")
//find all link elements in this ul which have href set to #

.css('color','red');
//and set their color to red

Answer 3

Je ne suis pas sûr de bien comprendre votre question, mais si vous cherchez un moyen de rechercher des liens uniquement dans un élément donné, vous pouvez développer votre sélecteur:

// Assuming your mainnav ul has id="mainnav"
$('ul#mainnav [href*=#]').each(...);

C’est surtout une solution temporaire si vous me le demandez, cependant. Tôt ou tard, vous voudrez peut-être appliquer votre effet à d'autres éléments. Vous pouvez ajouter un attribut class pour les éléments sur lesquels vous souhaitez appliquer l'effet:

<a href="#" class="scroll-effect">...</a>

Puis sélectionnez-les comme suit:

$('.scroll-effect').each(...);