Colorboxとスムーズスクロール

html要素もポップアップできる便利なcolorbox
ページ内リンクつけるなら必須だと思うスムーズスクロール

でもこれを同じページで共存させようとするとなかなか厄介ですね、、。
どっちもa href=”#〜”を利用してるので、完全に競合します。

colorboxで使うリンクを#pop00などと固定しておいて、スムーズスクロールのscriptの記述で#pop〜を除外してもいいんですが
今回困ったのは、colorboxに閉じるボタンをaタグで設置したから!

先日の記事でご紹介した方法だと、
ポップアップ要素内に<a href=”#” id=”close”>閉じる</a>って書いちゃって
javascript追加でできたんですが、このhref=”#”にスムーズスクロールが効いて、、、
閉じるをクリックすると、スムーズにスクロールするようになってしまいました。。

なんとか#をはずせないかと思っていたら、
aタグじゃなくて、buttonにしてしまえばよかったんですね。
記述は一緒。aをbuttonにするだけ!
さくっと問題なく設置できましたとさ。

配布されてるスムーズスクロールのjsによっては、効かせたくないタグにはカスタムデータ追加で除外できるってことだったので
それに置き換えようかとも思ったのですが
すでにscript内でcolorbox用のタグを除外させてたので、
その記述を消して、またcolorbox利用してる全部のタグに追記するのも、、、。と諦めました。
やらなくてよかった!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


top