Web初心者がjQuery ページのトップへ戻るを実装する方法(サンプル付き)

前回、「Web初心者がjQueryを始めるための準備」で、実装する前の準備の方法を記事にしました。今回は、ページの先頭に戻るjQueryを実装します。

Web初心者がjQuery ページのトップへ戻るを実装する方法(サンプル付き)
photo credit: “Cowboy” Ben Alman via photopin cc

jQueryを動かすために STEP1

ヘッダー内に下記の記述を書きます

実際に動く記述を書きます STEP2

さっき書いたコードの続きに書きます。

簡単に説明すると#gototopのaタグで囲まれたボタンを押すと、ページの先頭に戻るという設定です。

ボタンの設置します STEP3

戻る場所を作ります STEP4

この記述だけでは、戻ったことがわかりませんので、改行<br>など入れてスクロールできる長さまで何かコンテンツに入れるとわかります。

まとめ

記述だけではと思いましたのでサンプルも作りました。

[サンプル] jQuery ページ先頭へ戻る

よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。実際に「ページ先頭へ戻る」は、よく使われるjQueryです。記述も難しくはありませんので是非挑戦してください!

※firefox、クローム、IEで動いていることを確認しております。

Web初心者がjQuery ページのトップへ戻るを実装する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*