¿Cómo puedo agregar animaciones de desplazamiento específicas de enlace, horizontales y verticales, usando jQuery?

Question

Tengo este script en mi sitio 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;
        });
      }
    }
  }); 
});

Funciona bien y desplaza los navegadores principales div hacia arriba y hacia abajo, etc., pero quiero que los <a href...> s dentro de la sección de servicios se desplace hacia la izquierda y hacia la derecha. También quiero agregar un control deslizante a la sección de cartera, pero el código anterior rige cualquier código adicional, ya que se aplica a todas las etiquetas ul. ¿Cómo lo especifico solo para mainnav <=>?

gracias de antemano

Answer 1

Cambie el selector de '[href * = #]' a 'ul.mainnav [href * = #]'.

Cómo escribir selectores que solo le dan los elementos que desea es probablemente lo más importante que debe saber cuando usa jQuery. Solo puedo recomendar leer la excelente documentación de jQuery en los selectores (pero también se recomienda lo demás).

Answer 2

Suponga que tiene la siguiente estructura y desea aplicar una función solo a " foo " enlazar. Y deje todos los demás intactos.

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

Entonces podría usar una selección de jQuery

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

Roto en pedazos

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

No estoy seguro de entender su pregunta exactamente, pero si está buscando una forma de encontrar enlaces solo en un elemento determinado, puede expandir su selector:

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

Sin embargo, eso es principalmente una solución temporal si me preguntas. Tarde o temprano es posible que desee aplicar su efecto a otros elementos. Puede agregar un atributo class para los elementos en los que desea el efecto:

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

Luego selecciónelos así:

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