内容へ移動
ユーザ用ツール
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
現在位置:
home
»
wiki
»
PukiWiki
»
Tips
»
001 スムーススクロールを実装する
トレース:
•
602
wiki:pukiwiki:tips:001
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 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> これでブラウザの右下にスクロールボタンが表示されます。
Permalink
wiki/pukiwiki/tips/001.txt
· 最終更新: 2014/11/07 08:34 (外部編集)
ページ用ツール
ログイン
文書の表示
文書の先頭へ
印刷
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
oeffentlich