Home >>Javascript Programs >Create a forward and back buttons in JavaScript

Create a forward and back buttons in JavaScript

Create a forward and back buttons in JavaScript

A website with easy navigation helps the visitors to feel comfortable. Navigation is an important part of a website. Navigation not only includes the menu links, it also include forward and backward navigation while browsing the websites. In this article, we will learn how to create a forward and backward buttons using the JavaScript. It is very useful when someone viewing your website and can easily navigate in webpages by using these buttons.

Let's take an example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript forward and back buttons</title>
	</head>
	<body>
		<h1>About my Website</h1>
		<p>Go to <a href="#">Next Page</a></p>
		<button id="back" onclick="goBack()">Go Back</button>
		<button id="forward" onclick="goForward()">Go Forward</button>
		<script id="jsbin-javascript">
			function goBack() {
				window.history.back();
				console.log('We are in previous page');
			}
			function goForward() {
				window.history.back();
				console.log('We are in next page');
			}
		</script>
	</body>
</html>
Output:

About my Website

Go to Next Page