maro-z.com

よくあるヤツだけど、微妙な間隔でリクエストされて、なんか毎回書き起こしてる気がするのでメモ的に。
（ちゃんとソースを管理しておけと）

サンプル

jQueryと、jQuery.easingを使用。

jquery.js
jquery.easing.1.3.js
の2つと下記のスクリプトをロードして、
スクロールにしたいアンカーリンクにclass=”sScroll”の属性を付けておくだけ。

#で始まるリンクを自動で拾う、という形の物が多いけど、
アンカーリンクを全部スクロールにしたくない、とか、
他のスクリプトで使う為にダミーのアンカーリンクを多用してるとか(自分がよくやる)
そんなケースの事を考えて、”sScroll”というクラス名のついた<a>タグだけを対象にした。

IEだと、jQueryのoffset()の値がスクロール位置によって狂うので、IEの時はoffset()の値にスクロール位置を加算して補正。
(offset()って絶対位置を取るんじゃなかったっけ…？)
何故か、divタグに直接borderのスタイルを設定した場合のみ狂う模様？(IEのみ)
レアケースだと思うので上記補正は除去

Operaの場合、”html,body”をanimateすると表示がおかしくなるので、Operaの場合のみ”html”を指定。

jquery.easingでイージングを付けたりした時、ページのスクロール量が足りないと動きがおかしくなるので、
アンカー先のスクロール位置がページのスクロール量を超える場合は調整。

やっつけ感漂う気がするけどこんな感じですかねぇ。