Come posso aggiungere animazioni di scorrimento specifiche del collegamento, orizzontali e verticali, usando jQuery?

Question

Ho questo script su il mio sito 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;
        });
      }
    }
  }); 
});

Funziona bene e scorre il navigatore principale div su e giù, ecc. ma voglio che <a href...> nella sezione servizi scorra a sinistra ea destra. Voglio anche aggiungere un dispositivo di scorrimento alla sezione del portfolio, ma il codice sopra sopra governa qualsiasi codice aggiuntivo in quanto viene applicato a tutti i tag ul. Come posso specificarlo solo nel mainnav <=>?

grazie in anticipo

Answer 1

Cambia il selettore da '[href * = #]' a 'ul.mainnav [href * = #]'.

Come scrivere selettori che ti danno solo gli elementi desiderati è probabilmente la cosa più importante da sapere quando si utilizza jQuery. Posso solo consigliare di leggere l'ottima documentazione jQuery sui selettori (ma anche le altre cose sono consigliate).

Answer 2

Supponi di avere la seguente struttura e desideri applicare una funzione solo al " foo " collegamento. E lascia tutti gli altri intatti.

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

Quindi puoi usare una simile selezione jQuery

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

Suddiviso

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

Non sono sicuro di aver capito esattamente la tua domanda, ma se stai cercando un modo per trovare collegamenti solo in un determinato elemento, puoi espandere il selettore:

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

Questa è soprattutto una soluzione temporanea se me lo chiedi, comunque. Prima o poi potresti voler applicare il tuo effetto ad altri elementi. È possibile aggiungere un attributo class per gli elementi su cui si desidera l'effetto:

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

Quindi selezionali in questo modo:

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