スクロールすると現れる、上へボタン::jquery

| カテゴリー : Jquery | コメント (0)   はてなブックマーク - スクロールすると現れる、上へボタン::jquery

ページをスクロールすると右下の方に現れてくる『戻る』ボタン。

やっぱり記事が長いページの場合には、あったほうが親切なように思います。

ということで実装方法など。

ダウンロード

jquery

scrolltopcontrol.js

実装したいページの<head>~</head>の部分に

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>
</head>

ボタン画像の保存場所は、scrolltopcontrol.jsファイルの中に記述があります。

controlHTML: '<img src="up.png" style="width:48px; height:48px" />'

それぞれ設置したディレクトリーが間違えているとうまくごかないので、動かないときは先ずディレクトリを確認しましょう。

オプションの設定値について

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
  • startline
    どれだけスクロールしたらボタンが現れるかを設定。数値が大きいほど、より下までスクロールしてから現れるようになります。
  • scrollto
    0か文字で戻り先を指定します。初期設定では0=topですが、任意の戻り先(id)を指定できます。
    例えば,<div id=”entry-pings”>の位置に戻したい場合、scrollto: ‘entry-pings’というように記述します。
    「#」は不要です。また、設定値の文字は必ずシングルクオーテーション「’」でくくりましょう。
  • scrollduration
    スクロールの所要時間。数値が大きいほど戻るのに時間が掛かります。
  • fadeduration
    ボタン画像のフェードイン/アウトの所要時間。コンマの前後でイン/アウトの数値です。数値が大きいほど表示/非表示に時間が掛かります。
  • offsetx/offsety
    ボタン画像の位置を設定。offsetxがウィンドウ右端からの距離、offsetyが下からの距離です。数値が大きいほどウィンドウの内側に寄ります。

おしらせ

  • Calemdar

    2012年2月
    « 1月   3月 »
     12345
    6789101112
    13141516171819
    20212223242526
    272829  
  • Category

  • Archive

  • Latest articles

  • Tag Cloud