スムーズスクロール
スムーズスクロールとは
スムーズスクロールとは、ページ内でアンカーリンクを移動する時にゆっくりスクロールするようにページを移動する事です。
スクロール見本 ←クリックするとページ下部まで移動します
スムーズスクロールを使う事で、リンクがページ内を移動してるのか、別ページに移動してるのか、閲覧者にとってわかりやすくなります。
スムーズスクロールの設置について
編集手順
- js ファイルのダウンロード
- js ファイルのアップロード
- ヘッド領域にタグを記述
- 動作確認
js ファイルのダウンロード
スクリプトは Smooth scrolling demo様よりいただきました。
jsファイルに加工してダウンロードできるようにしましたので、以下のボタンよりダウンロードしてください。
ボタンをクリックして ファイルを保存する を選択してください。
保存の際、ファイル名を変更しないように注意してください。
js ファイルのアップロード
ダウンロードしたjsファイルを、サーバーにアップロードします。
設置したいホームページのサーバーへＦＴＰソフトなどを使ってアップロードしてください。
階層はどこでもかまいませんが、次の手順でファイルまでのパスが必要となりますので、 階層管理が分からない方は、トップ階層にアップロードしてください。
ヘッド領域にタグを記述
HEAD要素内に以下のタグを記載します。
<script type="text/javascript" src="smoothscroll.js"></script>
HEAD要素内とは<head>～</head>で囲まれた範囲のことです。
ここに記述された内容は、ブラウザ内に表示されません。
src="smoothscroll.js" はアップロードしたjsファイルへのパスです。
トップ階層以外に設置した場合は、そこまでのパスを記述して下さい 。
QHMユーザーの為の設定方法
js ファイルのダウンロード
スクリプトは同じですので、上よりjs ファイルをダウンロードしてください。
ファイルのアップロード
トップ階層でももちろんかまわないのですが、ＱＨＭならサーバーにjsファイル用のフォルダがありますので、せっかくなのでそこにアップロードしましょう。
ＦＴＰでサーバーにアクセスすると、js という名前のフォルダがありますので、そこに上記のダウンロードボタンからダウンロードしたファイルをアップロードしてください。
HEAD要素内へのタグの記述
編集ボックス＞設定＞サイト情報の設定 とクリックして、
その他のタグ欄に以下のタグを書き込んでください。
<script type="text/javascript" src="js/smoothscroll.js"></script>
以上で、全てのページのアンカーリンクにスムーズスクロールが適用されます。
もくじ機能や、ページ内リンクなどで動作確認して下さい。
※jsフォルダ以外にスクリプトをアップロードした場合は、そこまでのパスを指定する必要がありますので、ご注意ください。
2010.8.15更新
