001 スムーススクロールを実装する [stepism]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== 001 スムーススクロールを実装する ======

===== 概要 =====
jQueryを使って、画面スクロールボタンを設置してみます。

==== 設置方法 ====
  * [[http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm|Dynamic Drive DHTML scripts- jQuery Scroll to Top Control]]にアクセスして、scrolltopcontrol.jsをダウンロードします。
  * 同ファイルを「js」フォルダに移動します。
  * サイトから"up.png"をダウンロードするか、自分で「up.png」を用意して「image」フォルダに移動します。

==== scrolltopcontrol.jsの編集 ====
  * 11行目で動作を調整できます。
<code>setting: {startline:100, scrollto: 0, scrollduration:100, fadeduration:[500, 100]},</code>
    * startline どれだけスクロールすればボタンを表示するか。
    * scrollto どこまでスクロールするか。0でトップページまでスクロールします。
    * scrollduration スクロールスピード。
    * fadeduration 画像のフェードインアウトの間隔。
  * 12行目の「up.png」イメージのパスを「image/up.png」に変更します。
  * 13行目でイメージの位置調整できます
    * controlattrs: {offsetx:5, offsety:5},

==== スクリプトの読み込み ====
  * 「skin」フォルダにある「pukiwiki.css.php」を開いて「<head>」タグに以下を追記します。
    * <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    * <script type="text/javascript" src="js/scrolltopcontrol.js"></script>
 
これでブラウザの右下にスクロールボタンが表示されます。

ユーザ用ツール

サイト用ツール

ページ用ツール