jQueryを使用して、水平および垂直のリンク固有のスクロールアニメーションを追加するにはどうすればよいですか?
質問
私のウェブサイトにこのスクリプトがあります:
$(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を上下にスクロールしますが、サービスセクション内の<a href...>
sを左右にスクロールさせたいです。また、ポートフォリオセクションにスライダーを追加したいのですが、上記のコードはすべてのul
タグに適用されるため、追加のコードをすべて支配します。 mainnav <=>にのみ指定するにはどうすればよいですか?
事前に感謝
解決
セレクターを「[href * =#]」から「ul.mainnav [href * =#]」に変更します。
jQueryを使用する際に知っておくべき最も重要なことは、必要な要素のみを提供するセレクターの作成方法です。 セレクターに関するjQueryドキュメントを読むことをお勧めします(ただし、他のものもお勧めします)。
他のヒント
次の構造があり、<!> quot; foo <!> quot;にのみ関数を適用するとします。リンク。そして、他のすべてをそのままにします。
<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
あなたの質問を正確に理解しているかどうかはわかりませんが、特定の要素でのみリンクを見つける方法を探しているなら、セレクタを拡張できます:
// Assuming your mainnav ul has id="mainnav"
$('ul#mainnav [href*=#]').each(...);
ただし、これは主に一時的な修正です。遅かれ早かれ、他の要素にエフェクトを適用したくなるかもしれません。効果が必要な要素にclass
属性を追加できます:
<a href="#" class="scroll-effect">...</a>
次のように選択します:
$('.scroll-effect').each(...);
所属していません StackOverflow