HTML Links that do nothing when you are on the page they link to

Question

I am currently building a website containing lots of links to different sections of my website (also known as navigation). Lets call those links and their corresponding pages link1, page1 , link2, page2, link3, page3 etc.

The general code for them is this:

<a href="/page1.html">Link1</a>

<a href="/page2.html">Link2</a>

<a href="/page3.html">Link3</a>

I want the user to click each link to move to the corresponding webpage and it works as supposed to. The problem is that I want the links to do nothing when the user is on the same page as the link they clicked (meaning it will only reload the page). Let me make this clear by using an example:

Current use: User is on page1. User clicks on link1. The browser will reload page1.
Desired use: User is on page1. User clicks on link1. The browser will do nothing.

TL;DR Essentially I am searching for an if clause. I have read there is no if clause in HTML simply because it's a markup language but what is another way to implement this? Thanks for your help.

Answer 1

The best answer I have found without the need to use JQuery or JS after munching through SO is this, answer made by Matt Crinklaw-Vogt:

Add a /#!. This will prevent the scrolling to the top and will also prevent the page reloading. Code:

<a href="/page1.html/#!">Link1</a>

Original answer:

How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

Answer 2

I'm not sure I like it, but you could use an empty bookmark to do this...

<a href="/page1.html#">Link1</a>

If you aren't on page1, it will load page1, but once you are there, it won't do anything.