jQuery

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

© 2024 Sedori Plan