colorboxとsmoothScroll

※この記事は11年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

非常にクールなjQueryプラグインがある。
ページ内リンクが、アニメーションでスイーっと動くようになるプラグインだ。
もちろん、有名どころで使ってるサイトも多いでしょう。

ページ内リンクをスマートにするsmoothScroll.js
http://blog.webcreativepark.net/2007/07/12-143406.html

だが、これとcolorboxとの整合性をとるのにえらく時間がかかった・・・。

colorbox
http://www.jacklmoore.com/colorbox/

このcolorboxも、超有名プラグインで、
LightBox調に画像を表示するプラグインなんだけど、
なんと、画像だけでなく、内部HTML、外部HTML、はたまたYouTubeからFlashから、なんでも表示できるというありえないくらい豪華なプラグインなのだ。

これを導入し、内部HTMLを表示しようとしたが・・・できない・・・。
元のソースと何度見比べても、全然わからない。
元のソースを、サーバーに上げてみたが、そっちはちゃんと表示される。
どうしてどうして？なんてやってる間に昨日は仕事遅刻しかけ、
本日は朝方まで奮闘してたわけです。
なんとか原因はつかめた。
どうやら、このsmoothScrollは、"#"がhref属性に入っている"a"タグに反応
し、何かをしていることを突き止め、（colorboxはこのハッシュによって、内部HTMLを表示する。例えば、<a href="#hoge"></a> のように）対処しようとしたが、うまくいかず・・・。

colorboxとsmoothScrollを同時に使うのはあきらめようと、思いかけていた最中、 上記smoothScrollのサイトをよく見てみると、以下の文章が書いているではないか。

■特定のリンクはスムーズさせない
smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#付きのリンクを利用していて、そこに関してはスムーズスクリプトに変換したくない場合は次のように記述してください。

スムーズなし

http://blog.webcreativepark.net/2007/07/12-143406.html

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・。

アホか俺はーーーーーー！！！
早くこれ見とけよ！！！！！
この二日間はなんだったの！！？
というわけで速攻完成しました。

colorboxと、smothScrollでまさかこんなことになるとは思わなかった・・・。