Wie kann ich linkspezifische Scrollen Animationen, horizontal und vertikal, mit jQuery hinzufügen?

Question

Ich habe dieses Skript bekam auf meiner Website :

$(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;
        });
      }
    }
  }); 
});

Es funktioniert gut, und scrollt die wichtigsten nav divs nach oben und unten usw., aber ich möchte, dass die divs innerhalb der Sektion Dienste nach links und rechts scrollen. Ich möchte auch einen Schieberegler zum Portfolio Abschnitt hinzuzufügen, aber die oben genannten Code über Regeln alle zusätzlichen Code, wie es für alle <a href...> Tags angewendet wird. Wie ich es nur auf die Mainnav ul angeben?

Vielen Dank im Voraus

Answer 1

Ändern Sie den Wähler von '[href * = #]' auf 'ul.mainnav [href * = #]'.

Wie Selektoren schreiben, die Sie nur die Elemente geben Sie wollen, ist wahrscheinlich die wichtigste Sache zu wissen, wann jQuery verwenden. Ich kann nur empfehlen, auf Selektoren die feinen jQuery Dokumentation zu lesen (aber das andere Zeug ist zu empfehlen).

Answer 2

Angenommen, Sie die folgende Struktur haben und Sie eine Funktion nur auf den „foo“ Link anzuwenden. Und lassen Sie alle anderen unberührt.

<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>

Dann könnte man eine solche jQuery-Auswahl mit

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

in Stücke gebrochen

$("#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

Ich bin mir nicht sicher, ob ich Ihre Frage genau verstehen, aber wenn Sie nach einem Weg suchen, Links zu finden nur in einem bestimmten Elemente, können Sie Ihre Wähler erweitern:

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

Das ist meist eine temporäre Lösung, wenn Sie mich fragen, aber. Früher oder später möchten Sie vielleicht Ihre Wirkung auf andere Elemente anzuwenden. Sie könnten ein class Attribut für die Elemente fügen Sie den Effekt wollen:

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

Dann wählen sie etwa so:

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