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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)