【JavaScript】戻るボタンと進むボタンを実装する方法

ウェブページのナビゲーションを改善するために、JavaScriptを使用して戻るボタンと進むボタンを実装する方法を紹介します。

戻るボタンと進むボタン

JavaScriptを使って戻るボタンと進むボタンを作る方法は、通常、ブラウザの履歴を制御する history オブジェクトを使用します。以下は、基本的な戻るボタンと進むボタンの作り方です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Back and Forward Buttons</title>
</head>
<body>

<button onclick="goBack()">戻る</button>
<button onclick="goForward()">進む</button>

<script>
function goBack() {
  window.history.back();
}

function goForward() {
  window.history.forward();
}
</script>

</body>
</html>

このコードでは、2つのボタンをクリックしたときに goBack() と goForward() 関数が呼び出されます。goBack() 関数はブラウザの履歴を1つ前に戻り、goForward() 関数は1つ進みます。これにより、ブラウザの戻るボタンや進むボタンと同じような動作を実現できます。