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

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

0 голосов
/ 21 июня 2009

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

$(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 с, вверх и вниз и т. Д., Но я хочу, чтобы div в разделе служб прокручивали влево и вправо. Я также хочу добавить слайдер в раздел портфолио, но приведенный выше код переопределяет любой дополнительный код, так как он применяется ко всем тегам <a href...>. Как мне указать только mainnav ul?

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

Ответы [ 3 ]

1 голос
/ 21 июня 2009

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

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

0 голосов
/ 21 июня 2009

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

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

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

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

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

$('.scroll-effect').each(...);
0 голосов
/ 21 июня 2009

Предположим, у вас есть следующая структура, и вы хотите применить функцию только к ссылке "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
...