jQueryを使用して、リンク固有のスクロールアニメーションを水平および垂直に追加するにはどうすればよいですか？

Question

私はmy website上でこのスクリプトを持っている：

$(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 Sをスクロールが、私はサービスセクション内のdiv sが左右にスクロールします。また、ポートフォリオセクションにスライダを追加したいのですが、上のコードでは、すべての<a href...>タグに適用されているので、追加のコードをルール化しています。 mainnav ulにのみどのように指定しますか？事前

Answer 1

変更 '[のhref * =＃]' からセレクタul.mainnav」に

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

が粉々に壊れたようにjQueryの選択を使用することができますhref * =＃] '。

jQueryを使用するときには、おそらくあなたが望む要素を与えるセレクタを書くことが、おそらく最も重要なことです。私は罰金jQuery documentation on selectorsを読むことを推奨することができます（しかし、他のものも推奨されます）。

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> 

は、その後、あなたは[

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