ある程度スクロールすると出現するページの先頭へボタンのスクリプト
長いページなどの時に便利なのがページの先頭へのボタンやテキストですが、
どのページにも常になければというものでもありません。
そこで、ある程度スクロールされると表示される、ページの先頭へ（ページトップ）の設置方法の備忘録。
こちらのサイトからscrolltopcontrol.jsとup.pngをダウンロード
ダウンロードしたらサーバーにアップロード
アップロードが完了したら、scrolltopcontrol.jsを開いて、12行目あたりの
以下の部分を画像をアップロードした階層までのアドレスに変更。
controlHTML: '<img src="http://画像のアドレス/up.png" />',画像を変えたい場合は、画像を用意して違うものを設置すればＯＫです。
あとは、下記の記述を追加。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" src="アップロードした階層までのパス/scrolltopcontrol.js">とりあえずこれだけでも動作しますが、
画像が現れるまでの位置を調整したいとか、
上に行くまでのスピードをコントロールしたい場合は、
１１行目あたりにある startline:数値, scrollduration:数値, をそれぞれ変更。
画像が現れるまでの位置調整はstartline:数値, を変更
（数値が大きいほど、下の方で現れるようになります）
上に行くまでのスピート調節は scrollduration:数値, を変更
（数値が小さいほど上に戻る時間が早い）
さらに、そのもうちょい下あたりにある、
{offsetx:数値, offsety:数値} っていうところでボタン画像の表示位置が設定可能。
offsetxが右端からの距離。offsetyが下端からの距離。
それぞれ数値が大きくなると距離が増えます。
これは、それぞれのHPのデザインとか配置によるでしょうけど、
うちの場合は、{offsetx:5, offsety:20}です。
もし、ある一定の位置に固定表示したい場合は
<a href="#top">クリックで上までスクロールします</a>ってやると表示されます。
： ： このページの内容と関連がある記事 ： ：
- http と https で jquery の読み込み先を分ける簡単な方法
- http と https で同じスクリプトを使い分ける!?
- copyright（コピーライト）表記を自動で更新するスクリプト
- ワードプレスでトラックバックURI(URL)を表示・簡単にコピーできるようにする
- 角丸画像で切り抜いた写真に角丸の枠線を付ける方法
