JavaScript - PageTopボタン配置！
Updated:
昨日は「Ruby on Rails - jQueryを導入！」のとおり「Ruby on Rails」でJavaScriptのライブラリ「jQuery」を使用できるようにしました。
今日は、その「jQuery」を使用したJavaScriptの例を紹介します。
それは、Webページを下のほうへスクロールした際に一気にページの最上部へ戻るためのボタンです。
もっと間単に実現する方法もあるかもしれませんが、当方は以下の方法で実現しました。
作業記録
前提条件
・Ruby on Rails を使用。 ・Rubyのバージョンは1.9.2-p180。 ・Railsのバージョンは3.0.3。 ・Railsに「jQuery」がインストール済み。 ※若干のHTML等の知識があれば、Railsの知識がなくても大丈夫でしょう。
１．ソース・画像の準備
「Dynamic Drive DHTML scripts- jQuery Scroll to Top Control」から以下をダウンロードする。
- scrolltopcontrol.js
- ボタンイメージ(up.png)
※ボタンイメージは自分の好きなイメージを準備すればよい。 そして「scrolltopcontrol.js」は「public/javascripts」配下へ、ボタンイメージは「public/images」配下へ配置する。
２．HTMLソースの編集
HTMLソースで「scrolltopcontrol.js」を読み込むために<head>タグ内へ以下の記述を追加する。
<%= javascript_include_tag "scrolltopcontrol.js" %>
※Railsではなく普通のHTMLなら以下のようなコードとなります。
<script src="/javascripts/scrolltopcontrol.js" type="text/javascript"><!--mce:0-->
（”/javascripts/scrolltopcontrol.js”の部分は環境に合わせて変更）
３．「scrolltopcontrol.js」のカスタマイズ
ボタンイメージを読み込めるよう「scrolltopcontrol.js」のパス指定部分を環境に合わせて編集する。 サイズも使用するものに合わせる。
controlHTML: '<img src="/up.png" style="width: 48px; height: 48px;" />'
↓ 変更
controlHTML: '<img src="/images/up.png" style="width: 48px; height: 48px;" />'
※上記は当方のWindowsXP環境の場合。 Webサーバのdocument_rootの設定等により異なります。 好みによっては以下の部分もカスタマイズ可能。
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}
- startline → ボタンイメージが表示されるページ最上部からの位置（ピクセル）
- scrollto → ボタンイメージをクリックして戻る位置（ピクセル） （ID名で指定することも可能）
- scrollduration → ボタンイメージをクリックした時にスクロールして戻るまでの時間（ミリ秒）
- fadeduration → ボタンが表示/非表示になるのにかかるフェイド時間（ミリ秒） （前がフェイドイン、後がフェイドアウト）
こちらもカスタマイズ可能です。
controlattrs: {offsetx:5, offsety:5}
- offsetx / offsety → ボタンイメージのページの右下表示位置（ピクセル）
４．動作確認
Webブラウザでページを表示し下のほうへスクロールしてみる。 ページトップへ戻るためのボタンが表示されるはず。 そのボタンをクリックしてページのトップへ戻ればＯＫ！ 当方のホームページでもご確認いただけます。（→ mk-mode SITE ）
参考にしたサイト
・スクロールするとスーッと出現するPageTopボタン - hatena chips ・Dynamic Drive DHTML scripts- jQuery Scroll to Top Control
以上。
Comments