How to move pages back and forth according to JavaScript browser history

Learn how to use JavaScript to move pages forward and back when the user clicks the browser’s back or forward button.

I would like to know how to move pages forward and backward according to the browser history. How can I write JavaScript code to manipulate the browser history?

To manipulate the browser history, the window.history object is used. window.history object provides methods and properties for accessing browser history entries. In addition, the back() and forward() methods can be used to move back and forth through the browser history entries.

How to work with browser history

Browser history is the history of previously viewed web pages . Browser history allows you to go back and forward to previously viewed web pages.

How to manipulate browser history with JavaScript

To manipulate the browser history with JavaScript, use the window.history object. This object provides methods and properties to access entries in the browser history. The back() method can be used to go to the previous page, and the forward() method can be used to go to the page one page later.

What are back() and forward() methods?

The back() and forward() methods are methods of the window.history object and are used to move to the page before or after one, respectively.

The back() method can be used to go to the page before the current page. This is equivalent to clicking the browser’s “back” button.

The forward() method can be used to move to the next page after the current page. This is equivalent to clicking the browser’s “forward” button.

Translated with www.DeepL.com/Translator (free version)

back()and forward()how to use the method

The following is a JavaScript sample program that uses the back() and forward() methods to go back one page and forward one page.

// Go to previous page
window.history.back();

// Go to the next page
window.history.forward();

In the above code, the back() method of the window.history object is used to move to one previous page. Similarly, the forward() method can be used to go one page later.

Explanation using a sample program

As shown below, calling the back() method will take you to the previous page, and calling the forward() method will take you to the next page.

// Go to the previous page when the back button is clicked
document.getElementById("back-button").addEventListener("click", function(){
  window.history.back();
});

// When the forward button is clicked, it takes you to one page later.
document.getElementById("forward-button").addEventListener("click", function(){
  window.history.forward();
});

Points to note when using back() and forward() methods

When manipulating the browser history using the back() and forward() methods, please note the following

• The back() and forward() methods should only be used for page transitions using JavaScript. Automatic page transitions for the user are detrimental to the UX and should be avoided.
• The back() and forward() methods can be used to return to previous pages and should not be used on pages that contain sensitive or important information.

summary

We showed you how to use JavaScript to move pages forward and backward when the user clicks the browser’s back or forward button.

Now you know how to manipulate browser history using JavaScript. 
thank you.

Manipulating browser history using JavaScript allows users to navigate pages smoothly. 
However, intentionally rewriting your browser history can have a negative impact on SEO, so we recommend that you proceed with caution.