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

スルスルっと気持ちよくページスクロール

前回の記事で紹介した記事リストで該当記事までジャンプするように設定してあるのだが、普通は瞬間に切り替わるのでユーザーはどこに移動したのか分からない場合もあると思います。この場合、スムーズにスクロールして移動してくれると分かりやすいですね。

で、いろいろ探してみたところ、下記のものが設置も簡単で、よさげなので早速、導入してみました。

簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3

まず、右のリンクをクリックしてみてください。→記事の最後へ
(あっ、ページの読み込みが完了してないと動作しないので読み込み中の場合は、少し待ってね。)

移動したら、 元位置に戻る をクリックしてみてください。

お帰りなさい、戻ってきましたか。気持ちよくスクロールしましたか。目的地で停止する直前でスピードダウンして停止するところが気持ちいいですね^-^。

さらにカスタマイズで、停止位置を微調整できるところも気に入りました。あまりきっちりの位置だと窮屈な感じがするので、規定位置より上部に少し隙間ができようにしてみました。

設置は簡単です。上記ページの JSファイルのダウンロード よりスクリプトファイル jquery.page-scroller-306.js と jquery-1.3.2.min.js をダウンロードします。このファイル名のままではFC2ブログにはアップロードできないので、.(ピリオド)を含まないファイル名に変更します。今回は、page-scroller.js と jquery.js に変更してアップロードしました。

テンプレートのHTMLのヘッダー部分に、下記のようにスクリプトを読み込むコードを記述するだけです。後は何もしなくても、通常のページ内リンクの移動がスムーズスクロールになります。

************* の部分は自分のブログのファイルアップロード先URLにします。

さらに停止位置を微調整する場合は上記のコードのあとに下記のように追加します。

上記は規定位置より-25ピクセル上で止まります。



元位置に戻る

拍手する

5 Comments

MCMLXV_65 says...""

はじめまして! たまごさんのブログ『たかごかけごはん』から、こちらにお邪魔致しました。この「スルスルっと…」、とても面白い動きで以前から興味があったスクロール方法だったので、さっそく、私のブログでもトライして、うまく動かせました! 実際に動作を確認して、感激です!!

また、面白い機能を、いろいろとトライしてみたいと思います。また、これからもよろしくお願い致します!!!

2009.06.13 20:28 | URL | #4p5knda6 [edit]
hatena says..."はじめまして、MCMLXV_65 さん"

「スルスルっと…」これ気持ちいいですよね。なんかくせになります。私も導入してから、意味もなく行ったり来たりスクロールさせてます。

MCMLXV_65 さんのブログ、ちょっと見てきました。相当のロック通ですね。実は、私も青春時代はロック少年でして、相当のレコードコレクターでした。ので、非常に興味深いです。さっそく、お気に入りに登録しました。これから、たびたび訪問させていただくと思います。

で、新着記事一覧を見ていたら、「スネークマンショー」が目に入ってきました。私もこのレコード持ってました。なっ、なつかし~。確かにこれは、おおっぴらには聴けないですね。

2009.06.14 00:52 | URL | #5uE6dEgY [edit]
MCMLXV_65 says..."こちらこそ、よろしくお願いします!"

hatenaさん。当方のブログもご覧頂きありがとうございます! いろいろとブログのカスタマイズにも興味を持っていますので、これからもゼヒとも参考にさせて下さい。私のブログもいろいろなブログパーツや裏ネタを盛り込んで、日々、トライの毎日です。

好きな音楽ネタには事欠かないので、お気に入りの記事でもありましたら、ぜひ足跡でも残して下さいませ。今後ともヨロシクです!!!<(_ _)>

2009.06.14 01:30 | URL | #4p5knda6 [edit]
Hiro says..."参考にさせて頂きました。"

hatenaさん。こんばんは。
jqueryを使ったこちらの記事も参考にさせて頂きました。

2009.09.25 01:47 | URL | #27Yb112I [edit]
hatena says..."Hiroさん、コメント、TB、感謝。"

トラックバック先、見させていただきました。
そこで紹介されている参照先の「ブログが作りたい!「ページの先頭へ戻る」の常駐表示:CSS小技」もなかなか興味深そうな内容ですね。

カスタマイズ以外にも、映画情報など参考になる情報満載なので、たまにおじゃまさせていただいてます。

今後ともよろくし。

2009.09.25 23:13 | URL | #5uE6dEgY [edit]

Leave a reply






該当の記事は見つかりませんでした。