Knack Anchor Link

Page does not reload. Will move to the anchor link.

by wexfordpartners

HTML

<html>
<body>
<a href="#home/example" data-kn-slug="#home/example" class="myExample">Example headline</a>

<h5 class="jump"><a name="home/example" id="home/example">Example headline</a></h5>

</body>
</html>

CSS

.jump {
  margin-top: 1000px;
  margin-bottom: 1000px;
}

JavaScript

$(document).on('knack-view-render.view_290', function(event, view) {
LazyLoad.js(['https://code.jquery.com/jquery-3.2.1.min.js'], function () {
         
         $(document).on('click', '.myExample', function(e) {
          var anchorHash = $(this).attr("href"); // Get Href
          anchorHash = anchorHash.substring(1); // Remove # to Equal the ID to Link To
          e.preventDefault(); // Prevent Page from Reloading
          var move = document.getElementById(anchorHash); // Find The ID To Link To
          move.scrollIntoView({behavior: "smooth"}); // Move to Link, Can Remove Behavior if desired move.scrollIntoView();
      }); // End Click Event

					
          }); // End LazyLoad Jquery
          
      }); // End Render on Any Page