凸 ブロックのつみかさね

デザイン、技術メモ、レビュー中心の雑記ブログ

Colorboxのinlineモーダルが動かないのはページ内アンカーと衝突しているからかもしれない

Colorboxのinlineモーダルとページ内スクロール(アンカー)の組み合わせでトラブったので、メモしておきます。

状況

  • Colorboxを使用
  • ページ内アンカー間をスムーススクロールで移動出来るようにする

おさらい

Colorbox

Colorbox - a jQuery lightbox

Colorboxはさまざまなモーダルを実装できるプラグインです。その中で、inlineコンテンツをモーダル表示するようにできます。例えば以下のようなコードです。id「inline_content」のコンテンツを作り、リンク「#inline_content」から発火してモーダルを表示する仕組みですね。

<p><a class="inline" href="#inline_content">インラインHTML</a></p>
<div style="display:none">
    <div id="inline_content">
    <p>ここにコンテンツ</p>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./js/jquery.colorbox.js"></script>
<script>
    $(functioin(){
        $(".inline").colorbox({
            inline: true,
            width: "50%"
        });
    });
</script>

スムーススクロール

スムーススクロールは、プラグインだったり自前実装だったりいろいろなパターンがありますが、ほとんどの場合、#から始まるアンカーリンク先のY座標を調べて、そこまでスムーズにスクロールしていくものが大半だと思います。

<a href="#top">ページの先頭に戻る</a>

問題

上記2つの例で例えると、「href=“#inline_content"」というアンカータグと「href=”#top"」というアンカータグがバッティングしてしまい、Colorboxが動かなくなります。

対処方法

長くなりましたが、対処方法としては、「smoothScroll.js」を使い、このプラグインに実装されている「data-tor-smoothScroll=“noSmooth"」の機能を使います。

blog.webcreativepark.net

上記コードで例えると、以下のように追加します。

〜〜
<p><a class="inline" href="#inline_content" data-tor-smoothScroll="noSmooth">インラインHTML</a></p>
〜〜

「data-tor-smoothScroll=“noSmooth"」をつけたリンクは、スムーススクロールの影響を受けなくなります。つまり、Colorboxが無事動くという事になります。

今回のつみかさね

1つ1つのプログラムはわかっていても、組み合わせた時に予想しない挙動になる事があるので、上手く動かない時は、組み合わせを疑ってみるべきだと感じました。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

©blockworks.