読者です 読者をやめる 読者になる 読者になる

まるでちょんまげハリウッド

ちょんはり師匠の生きざまを切り売りしています。

イチオシは転職体験記!それ以外は、いい歳したオッサンの反省です。反省はしますが、後悔はしていません。たぶん。

jQueryでanimateさせてスクロール!offset.Topの罠

プログラミング javascript WEBプログラマー

みんな、アニメ好きだよね?

俺も好きだよ、アニメ。

でも、ごめん今日はそっちの話じゃないんだ。

ちなみに、animateに関係する話だけど、アニメグッズ専門店の話でもない。


ページ開いた時に、アンカーじゃなくて、jQueryでスクロールさせてなんやかんやさせたい!

ページ開いたときだから、スクロールはreadyかloadで実行することになるんだけどもね。

気を付けないと中途半端な位置にスクロールしちゃうよ、ということ。

ケーススタディ アコーディオンの展開とスクロール

Aというページから、Bというページに遷移するとして・・・

Aからあるパラメータが渡ってきた時だけ、Bのある部分へのスクロールと、ちょっとしたギミックを実行させたいなんてこと、奥様方のなかでもありませんか?

えぇ、えぇ、そうでしょう、そうでしょう。

そんなにないかもね。

でもとりあえず聞いてよ、見ていってよ。

photo by Rob Boudon

処理のながれはこう。

1.「ページA」からパラメータを伴って「ページB」に遷移。

2.「ページB」でjQueryjavascriptを用いて、アコーディオンの展開。

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