トップページ > フリーソフト - totop

フリーソフト totop - jQueryプラグイン

totop について

totop は当社が開発した、リンクや画像がクリックされた際に、ページ先頭へのスムーズなスクロールを行うだけの非常にシンプルな、しかしなかなか気の利いたjQueryのプラグインです。
まずは、このページの一番下の右にある  をクリックしてみてください。

スクロールしてここまで戻ってきましたか?
もし答えが「はい」なら、あなたはもうこのプラグインの機能のほぼ全てを理解したことになります。

ダウンロード

以下のリンク先をクリックしファイルを保存してください。

totop-1.1.zip(25,290byte)

このプラグインの使い方

このプラグインを使用するためには、まず、上のリンクより "totop-1.1.zip"をダウンロード・展開し、次の2つのファイルを取り出します。

  • jquery-1.4.2.min.js
  • jquery.totop-1.1.js

そして、htmlのheadかbodyタグ内に以下の例のように記述をします。最初の2行で、前述の2つのファイルへのパスを指定しています。この例はhtmlファイルと同じ階層に2つのファイルを配置した場合です。

<script type="text/javascript" src="./jquery-1.4.2.min.js"><script>
<script type="text/javascript" src="./jquery.totop-1.1.js"><script> 
<script type="text/javascript">
  $(function() {
    $(".top_button").totop();
  });
</script> 

そして次に、ページのお好きなところに(通常はページの一番下になるでしょう)、以下のようなリンクを作成します。この時、<a>タグのクラス名には、上の例内で使用した"top_button"を指定します。

<a class="top_button" href="javascript:void(0)">ページの先頭に戻る</a>

これだけで、このリンクをクリックすると、先頭までページがスクロールするようになります。

リンクを画像にする場合は、以下のように記述します。

<a class="top_button" href="javascript:void(0)">
  <img src="img/totop_button.gif" />
</a>

リンクはページ内にいくつでも作成することができます。全て同じクラス名を指定してください。

スクロール速度の設定

このプラグインでは、オプション'speed'の設定により、ページスクロールの速度を変えることができます。オプションの値には'fast', 'normal', 'slow' を設定することができます。オプションの設定は以下のように行います。

<script type="text/javascript">
  $(function() {
    $(".top_button").totop({ speed: 'fast' }); /* 速くしたい場合 */
  });
</script> 

オプションを設定しない場合、スクロールの速度はデフォルトの値である'normal'に設定されます。

動作環境

このプラグインは、jQuery 1.4.2での動作を前提に開発を行っています。jQuery 1.4.2で推奨されているブラウザは以下の通りです。

  • Microsoft IE 6以上
  • Mozilla Firefox 2以上
  • Google Chrome 1以上
  • Apple Safari 3以上
  • Opera 9以上

変更履歴

v1.1 (2010/06/28リリース)

  • Operaでスムーズにスクロールしないバグを修正

v1.0 (2010/05/19リリース)

  • MITライセンスでのフリーソフト化
  • jQuery 1.4.2 にて動作確認

v0.9(200x/xx/xx)

  • 非フリーソフトとして開発・使用

ライセンスについて

このプラグインはMITライセンスに則り配布します。よって、どなたでもこのプラグインを無償・無制限で扱えます。再配布や商用での使用も可能です。但し、著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載してください。また、作者はこのプラグインがおこす問題に関してなんら責任を負いません。

詳しくはMITライセンスをご参照ください。

最後にこのプラグインが少しでもあなたのお役に立てば幸いです。