JavaScript is there a way to stop href="#" to refresh a page ? nyroModal

Question

Is there some script that can stop <herf="#"> from refreshing a page?

You might ask why I would do that? Well I am enhancing an old .net web project, it uses nyroModal jQuery to open up a lightbox with, but when I try to close up the lightbox, nyroModal applies a hash (i.e. #) at the end of the URL and cause the page to refresh, which causes the screen to flip (bad user experience)

Javascript code:

$(function () {
    //set up light box
    var width = 766;
    var height = 591;
    $('.nyroModal').nyroModal({
        sizes: {
            initW: width, initH: height,
            minW: width, minH: height,
            w: width, h: height
        },
        callbacks: {
            beforeShowCont: function () {
               =$('html').css('overflow', 'hidden');
               =//width = $('.nyroModalCont').width();
               =//height = $('.nyroModalCont').height();
               =$('.nyroModalCont').css('width', width);
               =$('.nyroModalCont').css('height', height);
               =$('.nyroModalCont iframe').css('width', width);
               =$('.nyroModalCont iframe').css('height', height);
            =},
            =afterResize: function () {
               $('html').css('overflow', 'hidden');
            },
            afterShowCont: function () {
               $('html').css('overflow', 'hidden');
            },
            afterClose: function () {
               $('html').css('overflow', 'auto');
               //resizeBackground();
            }
         }
     });
 });

It would be great if anyone can show me how to solve this refreshing problem with a hash at the end of the URL. Or after refresh, my screen position stay the same. Not going up or down many thanks

Answer 1

For my projects, I add this code to prevent the jerk ( as the page scrolls to top ) when an anchor with href=# is clicked:

$(document).ready(function(){
  $("a[href=#]").on("click", function(e){
    e.preventDefault();
  });//a[href=#] click
});//document ready

This way you need not go to every anchor tag and disable this. In case, there are some exceptional anchor tags, you can easily exclude those using some selector or adding some condition inside this click handler.

And if you don't want this behaviour, you can directly remove these lines from your javascript, there is no need to modify your html code.