Empty URL hash causes page to jump on js events

Question

I have a gallery of photos with a next and previous button. If one of my javascript methods is broken for one reason or another when one of the buttons is clicked it will add a hash to the url i.e. www.google.com# . I know the hash can be given a div id to jump to that part of the page but when it's blank it jumps around my page a few times and I'm not sure what it's targeting. I thought of attempting to remove the hash from the url but then I'd have to ensure that on every action and that seems like bad practice. I would prefer if the hash just made no difference to the actions on the page.

Misfire

A 'blank hash' will usually take your browser window to the top of the page. – Marvismarwin

Have a read through this : #1357618 sounds like you need to prevent the default event. – Moire

I'm aware of prevent default but if the hash in the anchor tag href is improper then that's easier to change then attaching handlers to prevent default for everything. My biggest problem is broken javascript so I don't wanna use js to solve it if I can avoid it. – Misfire

Answer 1

Don't use href="#", it is improper.

Instead, use href="javascript:;" or a variant thereof (personally I use javascript:void(null);)
This explicitly states that the link does not go to another location, but is handled by JavaScript.

Kolo

This is what I was worried about. I know at some point it was all set to href='/' and now most of them are href='#' but changing it would probably be the easiest solution. – Misfire

I don't see how href="#" would be "improper", it's just a link to a bookmark. Using href="javascript:;" doesn't tell the browser that a script is handling the action, it asks the script in the href for the location to navigate to. As the script has a value of undefined, the browser can't navigate anywhere. – Systematology

Answer 2

I guess Next And Prev button has <a href="#" ...</a> like markup. In this case you can add event listener to those links with jquery

$('#prev, #next').on({
    'click': function(e) {
         e.preventDefault();
     }
})

and avoid changing location by browser. Or in pure javascript:

document.querySelectorAll('#prev, #next').addEventListener('click', function(e) {
    e.preventDefault();
},false)
//Note: this code is not cross-browser

Town

Answer 3

Don't use an anchor tag when you don't want to perform a navigation function. Use button

Crenulate