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

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」を読み込むために<head>タグ内へ以下の記述を追加する。

<%= javascript_include_tag "scrolltopcontrol.js" %>

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

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

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

3.「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 → ボタンイメージのページの右下表示位置(ピクセル)

4.動作確認

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

参考にしたサイト

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


以上。





 

Sponsored Link

 

Comments