ページ内リンクをスクロールで魅せる JavaScript
2008/01/27 Sun [Edit]
今日はページ内のリンクをスムーズにスクロールさせる JavaScript のご紹介です。
多くの Web ページの下の方に「ページのトップに戻る」なんてリンクがあります。通常はクリックするとページの先頭に「ドン！」と一瞬にして戻りますが、今回の JavaScript を使用することで「シュルルルルル〜♪」とページの先頭に戻ると言うアクションに視覚効果を与えられます。
ユーザビリティの向上にも繋がりますし、簡単に導入できるので試してみてはいかがでしょうか？
それでは早速どのような代物か JavaScript のサンプルページで実際の動きをご確認ください。
いかがでしたでしょうか？
この Smooth scrolling を導入してみよう！と言う方は続きをどうぞ。
それでは Smooth scrolling を手に入れましょう。海外サイトなので念のためキャプチャを使いつつ手順を説明します。
まずは Stuart Langridge さんのサイトへアクセスします。
そうすると下のキャプチャにあるページが開くので、ページの左側の上から２番目にある「browser stuff for the web」のリンクをクリックします。
リンクをクリックすると下のキャプチャにあるページが開くので、右側のコンテンツから「Smoothscroll」なるリンクを探し更にクリックします。
するとガラッとページの背景色が白に変わり、Smoothscroll.js の demo（デモンストレーション）ページが開きます。このページで JavaScript の動きも確認できます。ダウンロードするにはキャプチャの矢印３が示す「smoothscroll.js」を右クリックなどで保存します。
ソースコードをダウンロードできましたら拡張子に js があることを確認し、お使いのサーバーへアップロードします。
※ソースコードを保存する際はお使いのサーバーの文字コードで保存しましょう。ちなみに FC2ブログ
は EUC-JP です。
アップロードできましたら、smoothscroll.js を読込みたい HTML の <head> 〜 </head> の中に下のソースを追加します。
<script type="text/javascript" charset="EUC-JP" src="smoothscroll.js"></script>
上のソースの赤い部分、src 属性の値と先程アップロードした smoothscroll.js ファイルのパス（URL）を置換します。
また、上のソースの黒い部分、charset 属性の値は FC2ブログをご利用中の方はそのままで良いですが、それ以外の方はお使いのサーバーの文字コードと置換ください。
以上で準備は整いました。
後は <a> と id 属性をアンカーネームに使い、ページ内リンクを作れば「シュルルルルル〜♪」と指定した場所へ移動してくれます。念の為、下にページの TOP へ戻るリンクのサンプルソースを書いておきます。
<!--ページ内（body 内）の一番上のソース--> <h1 id="top">はじめてのブログデザイン</h1> <!--ページ内で一番上に戻る為のリンク--> <a href="#top">ページのTOPへ</a>
ちなみに Windows と Mac のモダンブラウザで快適に動作します。
Comments
コンバンワ
オレンジのテンプレート頂いてから、ひと月が過ぎました。あちこち触ってるうちに、なんだかゴチャゴチャするは、重くなるはで、果たしてこんなことで良いのかしら？ と思いつつもカスタマイズで遊んでおります＾＾；
シュルルルルル〜（smoothscroll）も、あまりに気持ちよいので、入れてみました！ しかし、JavaScriptに至っては中身が全くわかりませんので、なにか不具合が起きないか微妙に心配です。
jell-jell さんこんばんは☆
オレンジのテンプレートが少しでも jell-jell さんの楽しみに繋がっていると知り嬉しい限りです♪ありがとうございます！
シュルルルルル〜は気持ち良いですよね＾＾
私もユーザビリティ云々を記事内で記述していますが、正直に申し上げると９５％くらい「気持ちE〜〜！！」なんて感じの自己満足ですw
私も JavaScript はほとんどわかりません。が、Script の制作者であられる Stuart Langridge さんは、その分野で書籍を出すくらい著名な方ですので、おそらく色々なケースを想定し制作されていると思います。
また、多くの方からフィードバックなども頂きながら制作されていると思いますので、jell-jell さんが心配されるのは当然のことと思いますが、数あるスムーズスクロール系の他の JavaScript と比較した時、割と信頼のおけるモノと勝手に思っています＾＾
でも、他の JavaScript との併用や、ブログの構築環境によっては不具合が発生する可能性はあると思いますので、Firefox のエラーコンソール機能などで、カスタマイズ後にご確認されると安心できるかも知れませんよ。
話はガラッと変わりますが、実は先日 jell-jell さんのブログの記事に「直接記事編集ボタンの件」でコメントさせて頂こうと思ったのですが、禁止ワードに何度も引っかかり投稿できませんでした。
卑猥なキーワードやお下劣な文章ではなく、普通のコメントだったので念のためご報告です＾＾
それではまたこっそり遊びに行かせて頂きます☆
ど〜も、シュルルルルル〜を押しまくってるjell-jellです。
早速Firefox のエラーコンソールをかけてみましたところ、１エラーと３警告が発生！！ でも、対処の方法がわからないです＾＾；
私のブログをFirefoxでみると、カレンダの２月と３月の字が重なってしまっていますね。あとプルダウンメニューのデザインがイマイチです（これは仕方ないかな）。safariでばかりで見てると、他のでは表示が結構違ったりしますよね。前に一度だけ確認したんですけど、今現在Internet Explorerではどう表示されてるでしょ・・・（不安）
コメント欄の件は原因不明です。一時自分でも書き込めなかったので、おかしいなとは思っていたのですが、今日は調子がいいみたいなので大丈夫かしら？
また、勉強して出直して来ま〜す。
jell-jell さんおはようございます！
Firefox のエラーコンソールの件ですが、私が「3.1step & coffee」を確認させて頂いたところエラーも警告もなさそうでしたよ。
おそらくその前に開いていたページなどのエラーが残っていたのではないでしょうか？
エラーコンソール→消去→リロード（コマンド+R）するとそのページでのエラーをご確認できます＾＾
もしエラーが発生した場合の対処法は、エラーのでているソースの行が分かるので、それを解決します。
自力では難しい場合は制作者さんが分かるモノでしたら質問してみるのも手だと思います。
ちなみに私の今のテンプレートは CSS の警告が５つでますが、理由は分かっているので無視しています＾＾
カレンダの Firefox の件ですが、カスタマイズの際にサイドバーを縮小されたので、カレンダのレイアウトに使用している table の width がサイドバーより大きい為に文字が重なっているようです。
CSS 内の 640 行目付近「.calender th」のプロパティ「width:26px」を「24px」くらいにされると解消されるのではないでしょうか？
既にご存知かも知れませんが、当ブログの記事「色々なブラウザでの見栄えを確認できるサイト」で紹介したサイトで、Windows の IE での見た目を確認できますよ。
私の Windows から軽く確認させて頂いた感じでは、コメントを投稿する「submit」ボタンが IE6 と IE7 でズレていること以外は、大きな見た目のズレはなさそうでした＾＾
そうそう♪
昨日、コメント無事できたので、投稿できなかったのは一時的なものだったようです＾＾
またお好きな時に遊びに来てください！
こんばんは
エラーコンソールは、リロードしてみたらエラー表示は無くなったみたいです＾＾； 警告の方はFirefoxのバージョンが古かったのが良くなかったみたいで、最新バージョンにしたら警告も無くなりました。
カレンダは「24px」にしても、「01 | 2008/02 | 03」 の部分が重なって表示されてしまいますね。safariではちゃんと表示されているのですが・・・？ 一度hajime005-orangeのデフォルトに戻してみたのですが、やっぱり、この部分だけフォントがFirefoxでは上手く読み込めていないようです。とりあえず、
.calender caption {
font-family : "Times New Roman", Times;
color : #999;
としておきました。これで一応safariと同じように表示できたんですけど、解決になってるのかしら？
何れにしても、メインやサイドバーの幅を変えるのは、あちこちに影響が及んでしまうので、一筋縄ではいきませんね。素人はあんまり手を出さない方が良いかな？ 「〜記事とサイドバーの大きさを変更〜 」も読みましたが、３カラムの方はさらに難しそうです・・・＾＾；
また来ます(^_^)/
jell-jell さんおはようございます！
最近じじぃになってきたせいか早寝早起きの hajime です＾＾
エラーコンソールの件解決されたようで何よりです。
カレンダの件に関しては・・・
ごめんなさいm(__)m
じじぃになってきたせいなのか、生まれつきのものなのか、計算を間違えておりました。しっかりと計算したところ 20px 以下だと大丈夫だと思います。
実はカレンダーの table に関して寛容と言いますか、きっちりと数値を計算して指定せず、どこかブラウザまかせにしていました。
しかし今回 jell-jell さんからのコメントを頂き、カスタマイズする際に「分かり辛い」と判断し、しっかりとどのブラウザで見ても同じ横幅になるようプロパティを追加指定しました。また、あまり意味のないプロパティを発見したので削除しました。（当ブログで配布中のテンプレート全てに適用しました。）
現在ダウンロードできる hajime005-orange にて、CSS 内の 640 行目付近「.calender th」のプロパティ「width:26px」を「20px」とすることで、Mac と Windows のモダンブラウザでカレンダーの横幅が 156px となります。
□今回の変更点
607 行目付近 table.calender セレクタのプロパティに
border-collapse : separate;
border-spacing : 2px
を追加。
646 行目付近 .calender td セレクタから border 指定を削除です。
□今回の変更点終了
それと、ご存知でしたらお聞き流し頂きたいのですが jell-jell さんのブログのサイドバーには現在 158px までのモノが入ります。それ以上のモノを入れると予期せぬ表示結果になることがあります。
計算方法は170px（サイドバーの width）引く事の 12px（左右にある6pxの余白）で 158px です。
また、カレンダー内の縦の幅は 607 行目付近の table.calender セレクタのプロパティ line-height の値で調整可能です。横幅を縮めたので縦幅も適宜でご調整ください。
jell-jell さんの解決策は裏技だと思います。私の勝手な解釈だと .calender caption がダラダラしているところに「しっかり！」なんて解決方法でしょうか＾＾
なるべくカスタマイズして頂きやすいようにテンプレート制作を心がけているのですが、一筋縄では行かない部分もあると思います。しかし、こうしてご報告して頂けると本当に参考になりますので、jell-jell さんのように積極的にカスタマイズに挑戦して頂ける方は私としては大歓迎です！
ありがとうございます＾＾
そうですね。３カラムは皆さん大変苦戦しているようです＾＾
って、制作者としては笑ってる場合でもないかも知れませんが♪
またお待ちしています！
Track Backs
TB URL
アメブロからFC2へやって来て、ほぼひと月がたちました。 テンプレートを決めて、お正月中にいろいろいじくり回した後も、地味にちょっとず...
でお世話になっています。
