jQuery Back Button (go to previous page)

Share this article

jQuery/JavaScript code snippet to simulate a back button based on the users last web page.

$(document).ready(function(){
	$('a.back').click(function(){
		parent.history.back();
		return false;
	});
});

Frequently Asked Questions (FAQs) about jQuery Button to Go to Previous Page

How can I create a back button using jQuery?

Creating a back button using jQuery is quite simple. You can use the history.go(-1) method which is a built-in JavaScript function. Here’s a simple example:

$("#backButton").click(function(){
history.go(-1);
});
In this code, #backButton is the ID of the HTML element that you want to assign the back button functionality to. When this element is clicked, the browser will go back to the previous page.

Can I use jQuery to go back more than one page?

Yes, you can. The history.go() method accepts a parameter that specifies the number of pages to go back. For example, history.go(-2) will take you back two pages.

Is it possible to use jQuery to go forward to the next page?

Yes, it is possible. You can use the history.go() method with a positive parameter to go forward. For example, history.go(1) will take you to the next page.

How can I check if there is a previous page to go back to?

You can use the history.length property to check if there is a previous page. If history.length is greater than 1, it means there is a previous page.

Can I use jQuery to go back to a specific URL?

No, you can’t. The history.go() method only allows you to go back or forward a certain number of pages. If you want to redirect to a specific URL, you can use the window.location.href property.

Is it possible to prevent the back button from working in certain situations?

Yes, it is possible. You can use the event.preventDefault() method to stop the back button from working. However, this should be used sparingly as it can disrupt the normal flow of navigation.

Can I use jQuery to create a back button that works across different browsers?

Yes, you can. The history.go() method is supported by all major browsers, so it should work across different platforms.

How can I style the back button using CSS?

You can style the back button just like any other HTML element. You can use the id or class of the element to apply CSS styles.

Can I use jQuery to create a back button in a single-page application?

Yes, you can. However, since single-page applications don’t actually navigate to different pages, you’ll need to use a different approach. You can use the hashchange event to detect when the URL hash changes and then use the history.go() method to go back.

Is it possible to create a back button without using jQuery?

Yes, it is possible. You can use plain JavaScript to create a back button. The history.go() method is a built-in JavaScript function, so you don’t need jQuery to use it.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week