MS Access Tips/Sample and VBA and Blog customize etc...

スクロールするとスーッと出現するPageTopボタン

他のサイトで見かけて、面白いなと思ったので、導入してみました。

ページを下へスクロールすると、右下にボタンがスーッと出現して、そのボタンをクリックするとページトップへスルーッと移動します。

スムーズなスクロールは既に、スルスルっと気持ちよくページスクロール でjQueryのスクリプトを紹介済みですが、今回のもjQueryのスクリプトです。

ページトップ移動だけですが必要に応じて出現したり隠れたりするのがポイントが高いです。導入も非常に簡単でした。

難易度:

導入

まずは、下記のページへいって、スクリプト scrolltopcontrol.js と ボタンの画像 をダウンロードします。(画像は自作してもOKです。))

Dynamic Drive DHTML scripts- jQuery Scroll to Top Control

画像ファイルは、FC2ブログのファイルアップロードでアップロードしておきます。そのときアップロードした画像のURLをコピーしておきます。

scrolltopcontrol.js をエディタで開き、12行目の画像ファイルのURLを上記でコピーしたURLに修正します。あと、画像のサイズも実際のものに合わせます。当ブログの場合は下記のようになりました。

これを保存して、FC2ブログのファイルアップロードでアップロードします。あと、ブログの管理画面より「テンプレートの設定」を開き、テンプレートのHTMLの ブロック内に、下記のコードを挿入して、jQuery と scrolltopcontrol スクリプトを読み込みます。

jQueryは1行目で GoogleAPIs から読み込んでいます。既に導入済みの場合は不要です。***** の部分は実際のアップロード先のURLにしてください。

以上で、導入完了です。

カスタマイズ

通常はデフォルトのままで十分快適ですが、カスタマイズしたい場合は、scrolltopcontrol.js をエディタで開き、そこの 11行目から14行目までの設定値を変更することでカスタマイズできます。

 
設定項目 説明
startline どれだけスクロールしたらボタンが現れるかを設定。数値が小さいほどすぐ現れる。
scrollto スクロールして戻る位置。0 は Page Top です。また、ID名で指定することもできます。
scrollduration スクロールする時間。大きいほど、ゆっくりスクロールすることになります。
fadeduration ボタンが表示/非表示になるのにかかるフェイド時間。前がフェイドイン、後がフェイドアウトです。
offsetx/offsety ボタンが現れる位置を、ウィンドウの右下からの距離で設定します。

さらに上級カスタマイズ

このスクリプトはデフォルトでは一定速度でスクロールします。スルスルっと気持ちよくページスクロール で導入したスクリプトでは目的地に近づくとスピードダウンしてゆっくりと停止します。できれば、このようにしたいですね。

scrolltopcontrol.js のコードを見てみると jQuery の animate メソッドを利用してスクロールさせています。ということは jQuery の easingプラグインが使えそうです。easing とは、jQueryのエフェクトの変化の加速/減速の効果を設定できるものです。詳細は下記を。

jQuery Easing - jQuery 1.3.2 日本語リファレンス

まず、下記のページよりjquery.easing.1.3.js をダウンロードします。

jQuery Easing Plugin

ファイル名を easing.js に変更してブログにアップロードします。HTMLの headブロック内で下記のように記述して読み込みます。

次に scrolltopcontrol.js をエディタで開き、26行目を修正します。

, "easeOutExpo" が挿入したコードです。これは止まる直前に減速する効果がでます。これ以外にもいろいろな効果がありますので、上記の jQuery Easing のリファレンスのページを参照していろいろ試してみるといいでしょう。

拍手する

5 Comments

名無し says..."ありがとうございます。"

使わせて貰っています。
早速ですが
<script type="text/javascript" src="http://***********/scrolltopcontrol.js" charset="utf-8"></script
と書かれていますが
</script>と書かなくても支障はないのでしょうか
実際動かしたところ普通に動作したのですが、気になってしまいました。

2010.05.24 16:24 | URL | #- [edit]
名無し says...""

あと、もう一点気になりまして
こちらのサイトマップを起動後はスクロールボタンが見えなくなりますが、それを防ぐ手立ては有りますか?

2010.05.24 16:29 | URL | #- [edit]
hatena says..."タイプミス & 不具合"

<script type="text/javascript" src="http://***********/scrolltopcontrol.js" charset="utf-8"></script
と書かれていますが
</script>と書かなくても支障はないのでしょうか


単純にコピーミスです。</script>と書くべきですね。なぜ、支障なく動作するのかは、?です。記事は修正しておきます。

こちらのサイトマップを起動後はスクロールボタンが見えなくなりますが、それを防ぐ手立ては有りますか?

あっ、本当ですね。FancyBoxと何かバッティングしているだと思いますが、現在の所、ちょっと手立ては分かりません。

2010.05.24 20:27 | URL | #5uE6dEgY [edit]
hatena says..."PageTopボタンとの相性"

こちらのサイトマップを起動後はスクロールボタンが見えなくなりますが、それを防ぐ手立ては有りますか?

FancyBox を最新バージョン(Version: 1.3.4 )に差し替えると解消するようです。jQueryも最新バージョンに更新したせいかもしれませんが。

2010.11.23 09:32 | URL | #5uE6dEgY [edit]
yuusei says..."設置方法"

初めまして、先日にこちらのサイトに巡り会う事ができまして、捜し求めていました「スクロールするとスーッと出現するPageTopボタン」を設置をしたく苦慮致しましたが初歩的なところからわかりませず大変、お手数をお掛け致しますが宜しければお時間の有る時にお教え願えないでしょうか。
使用しておりますのは Movable Type4.292 です。
宜しくお願い致します。


下側に有りました「だれかさんの備忘録」の案内に気づかずにお手数をお掛けしました。お陰様で設置が出来ました。嬉しいです。
有難うございました。

2011.11.15 20:17 | URL | #5Gg6z9h6 [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/256-017088b0
「ページトップへ戻る」リンク
便利ナビから各記事へは「ページ内をスムーズにスクロール」で移動出来ますが、 各記事からページトップに戻るリンクは、追記(more_link)エリ...
右下にページトップへ戻るボタンをつける。
1、準備  ・scrolltopcontrol.js ↓こちらからダウンロードhttp://www.dynamicdrive.com/dynamicindex3/scrolltop.htm 2、編集 ダウンロードしたscrolltopcontrol.jsを開き、 12行目の部分を変更。 controlHTML: '&lt;img src="画像URL" style="width:48px; height:48px"...
該当の記事は見つかりませんでした。