 |
ホームページ作成 ＨＴＭＬ基礎講座 javascriptサンプル集
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
| ■javascriptサンプル集 |
 |
|
【javascriptで「戻る」ボタン（テキスト、画像）をWebページ上に設置】
戻るボタンをWebページ上に設置し、ユーザビリティを考慮します。 |
| サンプルソース |
■テキストを使用する場合
<html>
<head>
<title>javascriptで「戻る」ボタンをWebページ上に設置</title>
</head>
<body>
<strong>「戻る」ボタンをWebページ上に設置</strong>
<p><a href="javascript:history.back()"戻る↑</a></p>
</body>
</html>
※ブラウザの履歴を調べてその経路に対して戻ります。
上記の例は<a>タグを使用し、href属性に"JavaScript"の「history.back」メソッドを与えてます。
ブラウザに標準機能としてある「戻る」と同じ機能になりますがページを下へ見にいくユーザーにとっては、その先に「戻るボタン」があると非常に便利かと思います。
「<a href="javascript:history.back()">戻る↑</a>」を修正する事によりテキストを画像やボタンにする事も出来ます。
■画像を使用を使用する場合
「<a href="javascript:history.back()"><img src="../images/j_sample_6_back.gif"></a>」
へ変更します。
■<button>タグを使用する場合
「<button onClick="history.back()">戻る↑</button>」
■<input>タグを使用する場合
「<input type="button" value="戻る↑" onClick="history.back()">」
|
 サンプル表示 |
|
|
|
ページトップへ |