NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

超今更だけどページ内リンクなどでするするっとスクロールする方法

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1235日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

最近頻繁に使うのでメモ。

所謂スムーススクロールってやつですね。

定番すぎるので特に説明することもありませんが一応メモ。

「scroller」というクラスを持つページ内リンクに対して反応し、「#」ならページトップへ、それ以外なら指定したIDまでスクロールします。

また、トップにスクロールした場合は、 return false でURLに「#」がくっつかないようにしています。

逆に、ページの途中にスクロールした場合、更に次のページに遷移して戻ってきた時に同じ場所が表示されるよう、URLに「#foo」というふうに残るようになっています。

ページの構成上不要ならば、こちらにも「return false」すればOKだとおもいますが、あまり使わないかと…。

あとは、jQueryのanimateを使ってますので、アニメーション速度とかの設定はそれにあわせていけばOKです。

例えば、1500という部分は、アニメーションにかける時間ですので、この場合は1500ミリ秒(=1.5秒)でスクロールするということですね。

また、jQuery easingを使ってますんで、イージングプラグインを入れるか、必要なエフェクトのみreadyの外に書いておかないとエラーになります。

って部分です。

大抵使うイージングなんて1種類くらいなので、必要なやつだけ入れておいたほうが最終的には軽くなる気がしますが、他のアニメーションなんかでもイージング使う場合はプラグインを入れておいたほうがいいかもしれませんね。

それと、トリガーになるクラス名を変更したい場合は、

hasClass(‘scroller’) の「scroller」を任意の文字に変更すればOKです。

TAGS

Pingback / Trackback