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.

You could use JavaScript to do this (by preventing the default action to navigate away) or - if you are using a sever side scripting language - you could detect the URL and not make the link a link (e.g. and just a
tag instead). I wouldn't do either though - let the browser handle it the way it works on every other site; making your site the exception in this way will only make the usability worse. — Iain Collins, Oct 29 '12 at 10:09
@Wezly As I said in a previous comment the navigation code I am using is universal and every change affects all the navigational links on all the pages. Assuming I have to add/remove/edit a navigational link later I would have to edit all the navigations in every page. — Theocharis K., Oct 29 '12 at 10:31
If your navigation code is universal I assume you are including it some how - perhaps with php? `` - If so then just use php to detect the current page `$_SERVER['PHP_SELF']?>` and generate the navigation accordingly. — Wez, Oct 29 '12 at 10:35

score 4 · Accepted Answer · edited May 23 '17 at 11:48

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?

score 1 · Answer 2 · answered Oct 29 '12 at 10:06

1

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.

answered Oct 29 '12 at 10:06

Fenton

241,084
71
387
401

This will redirect the view to the top and I don't want this to happen. – Theocharis K. Oct 29 '12 at 10:33
My top tip is to turn to server-side for this and don't even make it a link. If nothing happens at all, the user is going to click again until they work out they are already on the page. So the best user experience would be to not make it a link and highlight it to show they are already on the page. If you give me a server side language you can use, I'll give you an example. – Fenton Oct 29 '12 at 10:41

Anirudh Ramanathan · Answer 3 · 2012-10-29T10:15:36.747

0

<a href="#">Link2</a>

OR

 <a onclick = "return false;">Link2</a>

That cancels out the load.

On page load, you could use JS as follows

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

JS:

document.getElementById("link1").setAttribute("href", "#");

edited Oct 29 '12 at 10:15

answered Oct 29 '12 at 10:06

Anirudh Ramanathan

46,179
22
132
191

This works but it will move the page to the top. Is there any way to cancel this? – Theocharis K. Oct 29 '12 at 10:10
@Aposperite you could cancel out that event. . All your links can be moved to the onclick event, rather than href. – Anirudh Ramanathan Oct 29 '12 at 10:13
Presuming that you can't use JS for a reason is there any other way to do it? I mean cancel the effect of scrolling to the top of the page. – Theocharis K. Oct 29 '12 at 10:19
If this is all static then you could just make the current page link a `
` element and style it the same (or highlight it to show which is the current page).
– Wez Oct 29 '12 at 10:20
@Wezly You are probably assuming I know on what page the user is and change the hyperlink of this page. Let me make this more clear, the navigation code I am using is universal, the code must be the same on page1 and page2. Maybe I didn't understand what you mean... – Theocharis K. Oct 29 '12 at 10:23
1

@Aposperite if the page is being served up by a server-side script, use that to modify the link. Else, JavaScript is the only way I can think of, to do this. – Anirudh Ramanathan Oct 29 '12 at 10:25
@Cthulhu Yeap that is the case but I can't figure out how to do that modification. I am going to work on it for a bit. – Theocharis K. Oct 29 '12 at 10:38

score 0 · Answer 4 · answered Oct 29 '12 at 15:30

You can use javascript to compare the current url to the anchor link, and if they're the same, prevent the default click event. Using jquery:

var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('a').each(function(){
    if(urlRegExp.test(this.href.replace(/\/$/,''))) {
        $(this).click(function(event) {
            event.preventDefault();
        });
    }
});

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

4 Answers4

Linked