Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

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

更新日:

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

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

jQueryを動かすために STEP1

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

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

<script type="text/javascript">

     $(function(){
     $("#gotoTop a").click(function(){
     $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
     return false;
     })
});
</script>

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

ボタンの設置します STEP3

<p id="gotoTop"><a href="#wrap">ページトップへ</a></p>

戻る場所を作ります STEP4

<div id="wrap">
</div>

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

まとめ

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

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

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

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.