みんな、アニメ好きだよね?
俺も好きだよ、アニメ。
でも、ごめん今日はそっちの話じゃないんだ。
ちなみに、animateに関係する話だけど、アニメグッズ専門店の話でもない。
ページ開いた時に、アンカーじゃなくて、jQueryでスクロールさせてなんやかんやさせたい!
ページ開いたときだから、スクロールはreadyかloadで実行することになるんだけどもね。
気を付けないと中途半端な位置にスクロールしちゃうよ、ということ。
ケーススタディ アコーディオンの展開とスクロール
Aというページから、Bというページに遷移するとして・・・
Aからあるパラメータが渡ってきた時だけ、Bのある部分へのスクロールと、ちょっとしたギミックを実行させたいなんてこと、奥様方のなかでもありませんか?
えぇ、えぇ、そうでしょう、そうでしょう。
そんなにないかもね。
でもとりあえず聞いてよ、見ていってよ。
処理のながれはこう。
1.「ページA」からパラメータを伴って「ページB」に遷移。
2.「ページB」でjQuery、javascriptを用いて、アコーディオンの展開。
3.「ページB」の所定位置(ID:hoge)にスクロール。
超シンプルだね。
で、今回ハマったのは3のところ。
スクロールするには、スクロールしたい場所を(IDとかで)指定して、 offset().Top やらでTopからの相対位置を取得するんだけれども。
とにかく、位置が取得できない。
いや、位置は取得できる。できるんだけども。。。
位置がズレるんだよね。
jQueryのoffsetのバグ?
結論からいうと、今回は違いました。
2.3.の部分を全部readyの中で片付けようとしていたのが良くなかった。
readyとload、どちらもページが開いたときに実行するときに使うんだけれども・・・基本的なことを忘れていたよ。
ready : DOMが構築されたら実行
load : ページが完全に読み込まれたら実行
readyの中でoffset使って位置を取得しようとすると、まだ画像とか読み込み中のときがある。
ということは、本来取得したい位置が、画像読み込みのサイズのせいでズレてしまうことがあるんですな。
1:readyでID:hogeの相対位置取得
→このときの位置をA地区とする。
2:ID:hogeより上にある画像読み込まれる。
3:画像のサイズのせいで相対位置ズレる →画像を読み込み終わったのでID:hogeがA地区からB地区へ変わる。
ということですよ。そうだったのかー。
えーちくがびーちくにかわるのかー。びーちくに。
こんな簡単なことにハマってしまうなんて、まだまだですな。
記事タイトルにoffsetの罠とか書いたけど、勝手にこけてただけだなwww