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.

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.

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

Answer 3

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