ある程度スクロールすると出現するページの先頭へボタンのスクリプト

2009 年 11 月 26 日 by とみせん 店長    No Comments    Posted under: javascript, ショップ作成

長いページなどの時に便利なのがページの先頭へのボタンやテキストですが、
どのページにも常になければというものでもありません。

そこで、ある程度スクロールされると表示される、ページの先頭へ（ページトップ）の設置方法の備忘録。

こちらのサイトからscrolltopcontrol.jsとup.pngをダウンロード

ダウンロードしたらサーバーにアップロード

アップロードが完了したら、scrolltopcontrol.jsを開いて、12行目あたりの
以下の部分を画像をアップロードした階層までのアドレスに変更。

画像を変えたい場合は、画像を用意して違うものを設置すればＯＫです。

あとは、下記の記述を追加。

とりあえずこれだけでも動作しますが、
画像が現れるまでの位置を調整したいとか、
上に行くまでのスピードをコントロールしたい場合は、
１１行目あたりにある　startline:数値,　scrollduration:数値,　をそれぞれ変更。

画像が現れるまでの位置調整はstartline:数値,　を変更
（数値が大きいほど、下の方で現れるようになります）

上に行くまでのスピート調節は　scrollduration:数値,　を変更
（数値が小さいほど上に戻る時間が早い）

さらに、そのもうちょい下あたりにある、
{offsetx:数値, offsety:数値}　っていうところでボタン画像の表示位置が設定可能。
offsetxが右端からの距離。offsetyが下端からの距離。
それぞれ数値が大きくなると距離が増えます。

これは、それぞれのHPのデザインとか配置によるでしょうけど、
うちの場合は、{offsetx:5, offsety:20}です。

もし、ある一定の位置に固定表示したい場合は

ってやると表示されます。

posted by そば富泉

こちらも合わせてご覧ください - このページの内容と関連がある記事 -

コメントをいただけると励みになります！よろしくお願いします。