BootstrapとjQueryのスムーススクロールをうまく使う方法

こんにちは、プロクラスの渡辺です！
この間、五山の送り火でした！いつも都合が合えば見ているのですが、これを見るために時間になるとご近所の方が外に出てきて少し会話をしたりしているときにいつもお盆が終わるんだなあ～と思います。まあ、今年は映画を見ていて気が付いたら終わっていましたが…（笑）

今回は（も）備忘録です。
最近、便利なBootstrapを使う機会が増えたのですが、jQueryのスムーススクロールと相性が良くないものがあるんですよね。
「カルーセル」「ドロップダウンメニュー」「タブメニュー」とか、つまり【href=”#”】を使うやつ！ 😈
でも、Bootrtrapのこういうのが簡単に実装できるのは捨てがたいので一度自分で解決していたのですが、数か月後にすっかり忘れてまた調べていたので、ブログに書いて記憶にとどめようと思います！ 😉

そもそもなんでちゃんと機能しなくなるの？

これがわからなくてイ～～ッ！！ 👿 となってたんですが、簡単に言えば無効化しちゃってたらしいんです！
スムーススクロールのコードで【href=”#〇〇”】ってやつ、全部拾ってスムーススクロールしちゃっていたんですね。
※例えば、#wapper、#tab1とか、id名で判別しているやつです。

めっちゃこまる～～！私は、スムーススクロールもタブ（カルーセルとかドロップダウンメニュー）も実装したい！！
なので、スムーススクロールのコードにちょちょっと書き加えてあげるといいらしいです。

ちょちょっと書き変えてあげる！

[class=”〇〇”]の<a href=”#”>はスムーススクロール「しない」という風にしてあげればいいわけらしいです。 😯
今回はタブを有効にしたいってことで、書き変えてみます。
ちなみにhtmlはこんなコードです。

[html]
<ul class="nav nav-tabs">
<li class="nav-item active">
<a href="#tab1" class="nav-link bg-primary" data-toggle="tab">タブ1</a>
</li>
<li>
<a href="#tab2" class="nav-link bg-primary" data-toggle="tab">タブ2</a>
</li>
</ul>

[/html]

■元のスムーススクロールのコード

[code lang=”js”]
$(function(){
$(‘a[href^=#]’,this).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;
});
});
[/code]

■書き変えたコード

[code lang=”js”]
$(function(){
$(‘a[href^=#]’+’a:not(".nav-link")’).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;
});
});
[/code]

$(‘a[href^=#]’+’a:not(“.nav-link”)’).click(function(){
赤色にしたところを変更しました！これで問題が解決です～！よかった！ 😀
ちなみに、カルーセルは「.carousel-contorol」に、ドロップダウンは「.dropdown-toggle」に「.nav-link」の部分を書き変えるといいそうです。

★おまけ★ページ内リンクをしたときのズレの解消方法

今回、スムーズスクロールが原因でいろいろな問題が発生したのですが、その時に「ヘッダーナビを【position:fixed】で固定した時」に到着位置がズレてしまう現象も発生していたので一緒に直しました 😉
なので一緒に備忘録しておこうと思います！

[code lang=”js”]
$(function(){
//任意の数値を入力↓
var headerHight = 150;
$(‘a[href^=#]’,this).click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top-headerHight; //★ -headerHightでズレを解消
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
[/code]

※上記の無効化部分は削除してます。
※var headerHight = 150;の数値は任意の数値に調整してください！ヘッダーの幅くらいで大丈夫だと思います。