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

잘 작동하고 메인 Nav를 스크롤합니다 divs 위아래 등. 그러나 나는 원한다 div서비스 섹션 내부에서 왼쪽과 오른쪽으로 스크롤합니다. 또한 포트폴리오 섹션에 슬라이더를 추가하고 싶지만 위의 코드는 모든 추가 코드를 모두에 적용 할 때 <a href...> 태그. MainNav에만 지정하는 방법은 무엇입니까? ul?

미리 감사드립니다

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(...);