cman.jpページ内リンク／ゆっくりスクロール
単純に<a>タグでページ内リンクを行うと、利用者（操作している人）が他のページに移動したか同一ページ内の移動かの判断ができない場合があります。
同一ページリンクであるのにページ移動と勘違いして、ブラウザの戻るボタンを操作するなどの問題が生じることがあります。
このため、同一ページ内のリンクは見れる形でスクロールした方が利用者の戸惑いが減ります。
サンプル
目的のリンク先までの細かさや移動時間を指定することができます。
動作を確認のうえ、JavaScriptをご利用ください。
| 移動の細かさ | （ 1:細い ～ 10:粗い ） |
|---|---|
| 移動時間間隔 | （ 1:早い ～ 99:遅い ） |
| サンプル確認 | ↓ クリックで「いぬ」にジャンプ  |
|---|
| 【1】JavaScriptの保存 | |
|---|---|
|
上記のJavaScriptを保存して、外部JavaScriptファイルとして定義してください。 （例） 「xxxxx.js」箇所は、保存した、パス＋ファイル名を指定してください |
|
| 【2】JavaScriptの設定 | |
|
設定(2か所)は上記サンプルの値となっています。
// ┏━【ユーザ設定】━━━━━━━━━━━━━━━━
// ┃
// ┃ 以下の[a]～[b]の設定をしてください
// ┃
// ┃┌───────────────────────
// ┃│ [a] 1回に移動する幅
// ┃│ 範囲 : 1 ～10 （ 1:細い ～ 10:粗い ）
// ┃│ 制約 : 10は移動表示しない
cmanLinkScrollCns["moveWidth"] = 3; ← 設定1
// ┃└───────────────────────
// ┃┌───────────────────────
// ┃│ [b] 移動する時間間隔
// ┃│ 範囲 : 1 ～99 （ 1:早い ～ 99:遅い ） cmanLinkScrollCns["moveTime"] = 20; ← 設定2 // ┃└─────────────────────── // ┗━━━━━━━━━━━━━━━━━━━━━━━━ |
|
| 【3】リンク先の設定 | |
|
リンク先には「ID」を付与してください （例） 「ID」名は何でも構いませんが、ページ内で一意となるように決めます。 |
|
| 【4】リンク元の設定 | |
|
ゆっくりスクロールリンクを実行するのは以下となります cmanLinkScroll('リンク先ID') 使用するタグにより設定するイベントは異なります。以下を参考に設定してください。 |
|
| <img> 画像 |
 ← クリックで「ねこ」にジャンプ |
<img src="inu.gif" width="60" height="60" border="0" id="inu" onClick="cmanLinkScroll('neko')" style="cursor:pointer;"> |
|
| <a> アンカー |
|
<a href="javascript:cmanLinkScroll('neko')">クリックで「ねこ」にジャンプ</a> |
|
| <button> ボタン |
|
<button type="button" onClick="cmanLinkScroll('neko')">クリックで「ねこ」にジャンプ</button> |
|
| その他 |
上記以外のタグでも「cmanLinkScroll('移動先ID')」を指定することでページ内リンクします たとえば、onLoadイベントで指定した場合、ページが開いた時に指定IDまでページが自動でスクロールします。 |
注意事項
- 縦方向のスクロール（ジャンプ）にのみ対応しています。
- ブラウザによっては動作しない可能性があります。
- 改変は自由です。