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タグで且つ#から始まるリンクだったらスムーススクロールするで!」って書き方。
この場合、クリックする度に、それがどういった要素なのか見た上で処理してくれるので、大丈夫。

では

「bxsliderの画像の一部でスムーススクロールがうまく働かないときの対処法」への1件のフィードバック

  1. bxsliderのスライドとサムネイルが離れた箇所にあり、スライドと同時にスムーススクロールを動かす必要があったため頭を悩ましていましたが解決しました!ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。