Smooth scroll with "Navigate to URL": index.html#bloc-goes-here

Wish List
12

The JavaScript that I presented in my previous post doesn’t work on all of my Blocs pages for some reason. However, I am able to use the following jQuery code in the page Footer with success, allowing smooth scrolling to Anchors on the same page, even if the anchors are in different Blocs.

<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>

There is a downside to the above code. On the page where that code is used, if I click a link that leads to an Anchor on another page, nothing happens. The link is dead. And when such links are clicked, Safari shows this error:

image
image894×120 19.8 KB

I can avoid the problem if I restrict the code to a single ID. For example…

<script>
$(document).ready(function(){
  $("#example-id a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>

But I need to use multiple IDs because I have 3 Blocs on the page which have links to anchors on that page. In other words, I am trying to bypass the anchor links to external pages which exist inside my mega menu, which is a specific bloc (ID). Using multiple IDs in that code doesn’t work, either with commas or without. Any ideas would be appreciated. Thanks.