Como posso adicionar específicos de ligação a rolagem animações, horizontal e vertical, usando jQuery?

Question

Eu tenho esse script no meu site :

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

Ele funciona bem, e rola os principais divs nav cima e para baixo, etc, mas eu quero que os divs dentro da seção de serviços para se deslocar para a esquerda e direita. Eu também quero adicionar um controle deslizante para a seção de carteira, mas o código acima sobre as regras de qualquer código adicional, como é aplicada a todas as tags <a href...>. Como eu só especificá-lo ao ul mainnav?

Agradecemos antecipadamente

Answer 1

Mude o seletor de '[href = * #]' para 'ul.mainnav [href = * #]'.

Como escrever seletores que apenas dar-lhe os elementos que deseja é provavelmente a coisa mais importante para saber quando usar jQuery. Só posso recomendar a leitura da multa jQuery documentação sobre seletores (mas as outras coisas é recomendado também).

Answer 2

Suponha que você tem a seguinte estrutura e deseja aplicar uma função apenas para o link "foo". E deixar todos os outros intocado.

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

Em seguida, você pode usar uma seleção tão jQuery

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

quebrado em pedaços

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

Eu não tenho certeza que eu entendi sua pergunta exatamente, mas se você está procurando uma maneira de encontrar ligações apenas em um certo elemento, você pode expandir seu seletor:

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

Isso é principalmente uma correção temporária se você me perguntar, no entanto. Mais cedo ou mais tarde você pode querer aplicar o seu efeito a outros elementos. Você pode adicionar um atributo class para os elementos que você quer o efeito sobre: ??

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

Em seguida, selecione-os assim:

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