stop page from jumping back to top when empty <a> tag is clicked

Question

The title says it all, how would I make it using only html, no JAVASCRIPT, to stop the page from jumping back to the top if a user clicks on an empty tag? So for example, if at the very bottom of my site, I have a link that is empty, but click on it, it takes be clear back up to the top...

Answer 1

A simple solution to this would simply put in the a tag:

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

In doing this, it won't scroll your page back to the top. To have it scroll back to the top, take out the a after the # symbol...so it would look like this:

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

That is the best explanation I can give you without any code provided from you.

Give that a try and it should work with what you are asking for...No javascript is needed. In fact you can even make the #a jump to a different location if you'd like on your page :)

UPDATE:

This may suit you better! Add this to either a js file or add it inline with you html document.

Separate js file (just make sure to call it externally on your html file):

$('#Add_Your_Id_Or_Class_Here').removeAttr('href');

Example: $('#link a').removeAttr('href'); or $('.link a').removeAttr('href'); or even $('a').removeAttr('href');

Now, if you want to achieve this via inline on your html file, simply do this:

<script>
    $('#Add_Your_Id_Or_Class_Here').removeAttr('href');
</script>

Again, you can use any of the examples above as well. In fact there are many ways you can achieve this now that I think about it...Hope that helps :)

Answer 2

如果您的链接不应该链接（例如，当它只是链接所在的占位符时），那么您不应该为<a>元素添加[href]属性