mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

JavaScript - PageTopボタン配置!

[ プログラミング ] [ JavaScript, Rails, Ruby ]

こんばんは。

昨日は「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の知識がなくても大丈夫でしょう。

1.ソース・画像の準備

Dynamic Drive DHTML scripts- jQuery Scroll to Top Control」から以下をダウンロードする。

  • scrolltopcontrol.js
  • ボタンイメージ(up.png)

※ボタンイメージは自分の好きなイメージを準備すればよい。 そして「scrolltopcontrol.js」は「public/javascripts」配下へ、ボタンイメージは「public/images」配下へ配置する。

2.HTMLソースの編集

HTMLソースで「scrolltopcontrol.js」を読み込むためにタグ内へ以下の記述を追加する。

1
<%= javascript_include_tag "scrolltopcontrol.js" %>

※Railsではなく普通のHTMLなら以下のようなコードとなります。

1
<script src="/javascripts/scrolltopcontrol.js" type="text/javascript"><!--mce:0-->

("/javascripts/scrolltopcontrol.js"の部分は環境に合わせて変更)

3.「scrolltopcontrol.js」のカスタマイズ

ボタンイメージを読み込めるよう「scrolltopcontrol.js」のパス指定部分を環境に合わせて編集する。 サイズも使用するものに合わせる。

1
2
3
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の設定等により異なります。 好みによっては以下の部分もカスタマイズ可能。

1
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}
  • startline → ボタンイメージが表示されるページ最上部からの位置(ピクセル)
  • scrollto → ボタンイメージをクリックして戻る位置(ピクセル) (ID名で指定することも可能)
  • scrollduration → ボタンイメージをクリックした時にスクロールして戻るまでの時間(ミリ秒)
  • fadeduration → ボタンが表示/非表示になるのにかかるフェイド時間(ミリ秒) (前がフェイドイン、後がフェイドアウト)

こちらもカスタマイズ可能です。

1
controlattrs: {offsetx:5, offsety:5}
  • offsetx / offsety → ボタンイメージのページの右下表示位置(ピクセル)

4.動作確認

Webブラウザでページを表示し下のほうへスクロールしてみる。 ページトップへ戻るためのボタンが表示されるはず。 そのボタンをクリックしてページのトップへ戻ればOK! 当方のホームページでもご確認いただけます。(→ mk-mode SITE

参考にしたサイト

スクロールするとスーッと出現するPageTopボタン - hatena chipsDynamic Drive DHTML scripts- jQuery Scroll to Top Control


以上。

Comments