Scroll to anchor from another page

Question

The issue is it works fine on the local environment. But when I publish it to surge it does not work properly. I am using webpack for both dev and prod.

Update I published the website again. This solution sometime works sometime not. Testing in Chrome Incognito. Is there any issue of caching ? After clicking few links on website, scroll to anchor started working properly.

I am using below code:

$("a[href^='#']").on('click', function(event) {

        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();

          var hash = this.hash;
          var header = $('.rd-navbar').height();

          $('html, body').animate({
            scrollTop: $(hash).offset().top - header
          }, 800, function(){

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        }
      });

Smooth scrolling works fine if the anchor is on the same page. But for example, I've got a footer where the link is technology.html#security. This works fine in my local environment. But when I click on the same link on the published version it does not scroll to the security section on technology.html.

I am also using below CSS:

html {
    scroll-behavior: smooth;
}    
section:before {
        height: 40px;
        content: "";
        display:block;
    }

Also if I refresh the page technology.html#security on local, it works fine and scrolls properly to the section. But not on published version.

How do fix scrolling to anchor on another page on production ?