ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 javascriptサンプル集

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



javascriptサンプル集 clear.gif  
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()">
pcリストマークサンプル表示

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora