Как добавить анимацию прокрутки для ссылок, горизонтальную и вертикальную, с помощью jQuery?

Question

У меня есть этот скрипт на моем веб-сайте :

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

Он работает хорошо и прокручивает главные навигационные страницы div вверх и вниз и т. д., но я хочу, чтобы <a href...> внутри раздела служб прокручивали влево и вправо. Я также хочу добавить ползунок в раздел портфолио, но приведенный выше код переопределяет любой дополнительный код, поскольку он применяется ко всем тегам ul. Как мне указать это только для mainnav <=>?

заранее спасибо

Answer 1

Измените селектор с '[href * = #]' на 'ul.mainnav [href * = #]'.

Как писать селекторы, которые просто дают вам нужные элементы, вероятно, самая важная вещь, которую нужно знать при использовании jQuery. Я могу только порекомендовать прочитать прекрасную документацию jQuery по селекторам (но другие вещи также рекомендуются).

Answer 2

Предположим, у вас есть следующая структура, и вы хотите применить функцию только к " foo " ссылка на сайт. И оставь все остальное нетронутым.

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

Тогда вы могли бы использовать такой выбор jQuery

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

Разбитый на куски

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

Я не уверен, что точно понимаю ваш вопрос, но если вы ищете способ найти ссылки только в определенном элементе, вы можете расширить свой селектор:

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

Это, по большей части, временное исправление, если вы спросите меня. Рано или поздно вы можете применить свой эффект к другим элементам. Вы можете добавить атрибут class для элементов, на которые вы хотите повлиять:

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

Затем выберите их так:

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