bxsliderの画像の一部でスムーススクロールがうまく働かないときの対処法

某制作会社に依頼をかけてできたデータでその不具合があったので対処法を。

そのjs、このスムーススクロールになってない？

$('a[href^=#]').click(function(){...});

もしこれになっていた場合、以下の原因がある。

原因

bxsliderや、他のスライダー系もそうだけど、ループの設定をした場合は大体の場合、スライドさせたいブロックのコピーがjavascriptによって生成される。これはループを違和感なく行うための処理。
また、スライダー系のjsは、スライドさせたい画像の読み込み完了後にスライドになることを推奨されており、$(window).on(“load”, function(){…})などで実行されることが多い。
で、それでなんでスムーススクロールが動かなくなるかというと、
ページが読まれる→スムーススクロールのjsが読まれる（#のリンクがついたaタグ探してそれスムーススクロールにするわ！）→bxslider実行（スライドさせたいブロックのコピー生成するううう）
という流れで処理されているため。
つまり、スムーススクロールのjsが読まれたタイミングではbxsliderで作られるコピーがまだ存在していないため、スムーススクロールにならないということ。

対処法

$(document).on('click', 'a[href*="#"]', function(){...});

これは「ページのどこでもクリックしたときに、それがaタグで且つ#から始まるリンクだったらスムーススクロールするで！」って書き方。
この場合、クリックする度に、それがどういった要素なのか見た上で処理してくれるので、大丈夫。

では