href hashtag # makes modal popup gallery on click to jump on the top of the site

Question

I am using an html5-css3 template with a modal popup gallery which jumps to the top of the site when I click on any image. It is because of the hashtag and I have no idea how to get it work properly. Please help! I am new to coding and I searched for an answer for days now but didn't find a solution.

here is how the html code looks like:

<a href="#" data-reveal-id="#modal-01"><img src="images/portfolio/canandreu.jpg" alt=""/></a>

Answer 1

If you add a class like modal-link to each of the a tags, then you can use some code like this:

var modalLinks = document.querySelectorAll('.modal-link');
Array.prototype.forEach.call(modalLinks, function(el, i){
  el.addEventListener('click', function(e){
    e.preventDefault();
  });
});

This will prevent each of the elements with the class modal-link from jumping you to the top of the page.

Answer 2

you can use or

but i suggest use user onclick="return false;" this will fix your problem

Answer 3

You can use href="JavaScript:Void(0);"

By using JavaScript:Void(0), you can eliminate the unwanted side-effect, because it will return the undefined primitive value.

<a href="JavaScript:Void(0)" data-reveal-id="#modal-01"><img src="images/portfolio/canandreu.jpg" alt=""/></a>