おすすめグッズや役立つ情報ブログ

Sedori Plan

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で動いていることを確認しております。

スポンサーリンク

アドセンス

アドセンス

  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.