スポンサーリンク
スポンサーリンク

ページトップへスムーズにスクロールさせる。

jQuery

今回は、ボタンをクリックしたら
ページのトップへ滑らかに遷移するというものを
jQueryを使って作成します。

1.jQueryのプラグインを入手する。

今回は、トップページにスムーズに戻るために
イージング関数が入ったプラグインを使用します。

サンプルコードについて

38行目までは、スクロールしているのが
分かるように適当な文字を入れています。

39行目ボタンを作成しています。

46行目のscriptタグ内で、
toTopをクリックしたときの処理を書いています。

47行目~49行目がアニメーションでページトップへ
ゆったりスクロールする処理を書いています。

今回はページのトップへスクロールさせたいので、
CSShs「scrollTop:0」と指定しています。

アニメーションにかかる時間は600/1000秒です。

「scrollTop」はjQuery独自に追加された
プロパティです。これを使用することで
ページのスクロールをすることができます。

51行目の「return false;」は今回は、
div id=”main” へのページ内リンクを止めるために
書いています。

これがないと、Topへをクリックしたときに
スクロールバーの部分がチラつくことがあります。

ブラウザによって違うスクロールの要素

今回のサンプルコードでアニメーションさせる要素を
$(“html, body”)と指定しています。これはブラウザに
よりスクロールする要素が違うからです。

ブラウザでのスクロール対象の要素
●html IE,Firefox
●body Chrome,Safari

実行結果はこちらです。

コメント

タイトルとURLをコピーしました