How to make a back button on a web page. Create a "go back" button A more universal way

In this article we will look at how you can create a “Go Back” button in any place you need. I think from the name of the button it is already clear what will happen when you click on it. Such a button can be inserted both into a category and into the material itself. Everything is done quite simply.

There are several options for how you can add a button, but I personally only used one way. Namely, the third option out of the three I proposed. A little further I’ll tell you why.

What options do we have:

The advantage of the third option is that if you need to edit the text on a button or change/add a style class, you will only need to fix the module itself, and not fix the button in all the places where it is located.

So, on one of my sites I used the third option:

The “HTML code” module was created and the button code was inserted there using the “Sourcerer” extension, which makes it possible to add any code to the material.

My working button code:

come back

The text is slightly decorated with an arrow using components from Bootstrap 3, and the button itself is styled via CSS.

Sometimes on web pages there is a need to temporarily go to some other (let's call it auxiliary) page, and then return back and continue working with it. For example, this could be a help page, registration page.

In this case, obviously, the return address can be very different. How to implement such a reverse transition on a website? Pure html/CSS is not enough here; you will need to use javascript.

The simplest thing is, for example, using this line in the script on the auxiliary page:

The history method remembers the history of navigation on a page and, in fact, its use is similar to using the browser's Forward and Back buttons, only a little more functional. This is the simplest and convenient way, but only under one condition: if the new (auxiliary) page is not opened in a new window. Otherwise, the auxiliary page will be opened for the first time (more precisely, it will be the first session for it, there have been no transitions on it yet). And this means that, in fact, there is nowhere to go back. That's why this method cannot be called universal. It will not work if the user is forced to open the page in a new tab or the browser does it for him - in accordance with the settings. In this case, the link attribute target=”_self” will not help: it will be impossible to go back from an open auxiliary page (unless, of course, you enter the URL of the source page manually in the browser address bar).

To implement it, you will need scripts on both the source and auxiliary pages. The idea may vary. One of them is based on the fact that the address (URL) of the source page is stored in the browser's address bar as a GET request. Thereby. The helper page, when receiving such a request, knows about its source. Based on this, it becomes possible to switch back, i.e. to the page from which the transition was made.

Schematically, this can be represented as follows:

On the page WHICH the transition should be made, there is the following script, which is a function - a mouse click handler (onclick):

function save_back(url) (

var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == "/") (
docum_href = docum_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}

In order for the function in the script to work, you need to install its handler on some element in one of the ways, for example, like this:

Click to go to support page

Note that the href attribute of this link has a corresponding address, which is specified in the onclick event handler function. This is done so that search robots understand which page the link will go to when you click on the link. If this is not needed, then you should make an empty href attribute, like

The principle of this script is that when the save_back(url) function is called, a (auxiliary) page with the url address is opened. To do this, the protocol of the page (for example, http or https) is determined, as well as the rest of the URL of the original web page, including possibly any GET request data (this is what is in the URL after the “?” sign). The received data is added to the URL of the page being opened - and a transition to it occurs.

It should have a script like this:

var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;

var question = "";
if(number_questions > 1)(
question = "?";
}
document.location = docum_protocol+"//"+ docum_href + question + get;
}

This script will also be launched when the mouse clicks on any element on which the corresponding handler is installed:

Return

This line cancels the default action when the mouse clicks on a link. The fact is that by default the link is followed. In this case, the transition will occur exactly to the address specified in the href attribute. This address (in particular, on an auxiliary page) may not contain the return address of the page from which the transition was made (if the transition to the auxiliary page is possible not from any one specific page, but from several source pages).

So, the script on the helper page reads the contents of the address bar and then splits it into an array of "?" elements. Please note that a URL can contain two such characters. The first will appear, as already mentioned, due to the fact that the address (minus the protocol) of the source page has been added to the address of the auxiliary page. And the second could be present as a result of the presence of GET request parameters when loading the source page. In other words, there may be one or two question marks in the address bar of the help page. To go from a secondary page to the original page when you click on a link

Return

The request is read from the address bar and converted to the same form that it had on the original page, after which the page is loaded at this address.

In addition, it should be noted that the article, in fact, is not about returning to the original page, but about reloading it. This, of course, is just an imitation of a return. In particular, the data entered on this page and its settings may not be saved. In addition, unlike RETURN, when the page loads, it will be opened from the very beginning of the site (i.e., its upper part will be located at the top of the screen). Whereas a “true” backtrack returns the (original) page to the exact location from which the jump was made. Therefore, let's try to combine both methods.

So, let's set the task:

if the auxiliary page opens in the same tab (window), then let the history.back() method be available;

but if the auxiliary page opens in a new window, then the method discussed above should work (because in this case history.back() will not work).

The script on the auxiliary page will change slightly (the line mentioned above will be added):

function return_to_initial_page() (
history.back();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
var get = docum_location;
var question = "";
if (number_questions > 1) (
question = "?";
}
document.location = docum_protocol + "//" + docum_href + question + get;
}

First we try to go back. If it works, the rest of the script will not work and you will return to the original page in the same place from where the transition was made. If not, then, as before, we extract the address of the source page from the parameters of the GET request and go to it.

Of course, this article shows only one of the technology options for “returning” BACK - to the original page. For this purpose, in addition to the GET request, other technologies could be used, for example local storage localStorage. In addition, to fully simulate a return BACK, it would be a good idea to transmit the scroll value of the original page via a GET request - so that later, even when opening the auxiliary page in a new window, you can return to the same place on the original page from where the transition was previously made.

Good afternoon, I have a question about how to move the button back and place it next to the next button when placing an order. Now it looks like this for me. https://yadi.sk/i/_ZNvGrvEhqSk3 If you move it down, it stops working. The code is responsible for. ..

There is a solution

Hello, can anyone tell me how to make a back button, for example, in the shopping cart, so that a person can return to the previous page?

Insert a button wherever you want into the template, for example, this

+1

When I press the back button on the browser, all the styles seem to disappear until I refresh the page. The default theme should show as in the screenshot below) Tell me what the problem is

Hello, I made a “Go back” button in the cart, not even a button, but just a link with the code Go back Now when returning back to the cart...

There is a solution

Good afternoon! I encountered the following problem: when you add an item to your cart and click the “back” button in the browser, information about the items in the cart (in the additional block) is not saved until you refresh the page. Those. go to the site, go...

The site you indicated uses a plugin for the cart. As an option with modifications, you can use sending the addition of goods not to?html=1, but to?html=1&items=1; this will respond with the full contents of the cart.

Good afternoon. At each step during checkout, a “Next” button is indicated. In the “Suprime” topic, I found the button code: