JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのhistory.back()・history.forward()で前のページへ戻る・次のページへ進むボタン

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

history.back()・history.forward()

JavaScriptのhistory.back()・history.forward()で前のページへ戻る・次のページへ進むボタン

JavaScriptのhistory.back()・history.forward()で前のページへ戻る・次のページへ進むボタン

あまり使う機会がありませんが、history.back()history.forward() を使う事で、「戻る・進む」ボタンを簡単に作れます。

history.back()・history.forward()

history.back()history.forward() のhistoryオブジェクトは、ブラウザの「戻る・進む」ボタンが有効な時、その履歴を参照してページ遷移を行います。

ブラウザの「戻る・進む」は、全体の順番を履歴として持ちますが、historyオブジェクトは、それぞれのウィンドウの履歴のみを保存するので、多少異なることは覚えておきましょう。

前のページへ戻る・次のページへ進むボタンのサンプル

それでは、前のページへ戻る・次のページへ進むボタンのサンプルについて見てみましょう。

以下ボタンでをクリックすることで、ブラウザのセッションを参照して「前へ・次へ」と履歴に準じたページ遷移が行われます。

かかかず
かかかず

前へ・次へに該当するページがない場合、ページ遷移は行われません。

HTMLの onclick属性を使って、そこに history.back()history.forward() を実行させます。

前のページへ戻る・次のページへ進むボタンのサンプルボタンのコード

この記事でサンプルのコードです。

HTMLのonclick 属性を使い、クリックでhistory.back()history.forward()を実行します。

<button onClick="history.back()">前のページ</button>
<button onClick="history.forward()">次のページ</button>
かかかず
かかかず

onclick属性を使うと、めちゃめちゃ簡単なコードです。

イベント処理で実行する場合

HTML属性のonclick 属性を使わずに、.addEventListener のクリックでイベント処理を実行するには、以下のように記述します。

<button id="btnBack">前のページへ戻る</button>
<button id="btnForward">次のページへ進む</button>

<script>
const btnBack = document.getElementById('btnBack');
btnBack.addEventListener('click', function(){
    history.back();
});

const btnForward = document.getElementById('btnForward');
btnForward.addEventListener('click', function(){
    history.forward();
});
</script>
かかかず
かかかず

記述量が多くなりますが、動作は上記ボタンサンプルと同じです。