[JS]特定の要素の<a>タグを除外してスムーススクロールをする方法｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]特定の要素の<a>タグを除外してスムーススクロールをする方法

スポンサード

jQueryのスムーススクロールを使うことはよくあるのではないかと思いますが、今回は指定したクラスの<a>タグをスムーススクロールから除外する方法を紹介させていただきます。

特定の要素の<a>タグを除外してスムーススクロール

まずはスムーススクロールをさせたなくない要素に、nosomoothというクラスを付けるようにしました。

<div class="nosomooth">
<a href="#">スムーススクロールしないリンク</a>
</div>

<a href="#">スムーススクロールしないリンク</a>

</div>

.nosomoothの要素内の<a>タグをスムーススクロールから除外するためには、以下のようなJavascriptの記述を行います。

$(function(){
$('a[href^=#]:not(.nosomooth a)').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});