Don't use JavaScript to create a back button

Written by on

While Googling around for something, I landed on a page that had some interesting tidbits of information. I was interested in reading other articles and saw what looked like a plain back button that looked like it would navigate me to a list of other articles I could read on the site. To my surprise when I clicked on the button, it actually took me back to my Google search result.

This occurred because the person who had implemented that back button had used JavaScript to handle the back navigation. The issue with this is, the assumption probably was that the person who implemented the button thought the user would click on the back button only within the website. They probably didn’t think of a scenario where the page would be landed upon at first from a Google search.

The culprit code for my wonky back navigation experience was this little piece of JavaScript.

<a href="javascript: history.go(-1)">Back</a>

What history provides in history.go() is a browser’s history. The .go() method allows you to navigate to a specific point in the browser’s history. So in the scenario where the assumption is that the user was browsing around a website, it is probably safe to assume by using a history.go(-1) to navigate to the immediate previous page would result in the intended action.

But as discovered above, it is quite possible to land on a page from an external site other than the one you’re currently on. Thus using the history API will result in a unpleasant experience. The safer and better solution is to just use a relative or absolute path in relation to the site the back button is on. That way no matter the point of entry, the intended action of navigating to another page on the same website is accomplished.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

If you'd more articles like this, you can get them by email.