Anchor Links

Does anyone know how to make anchor links work with knack?

When I use the codes below, the page is always reloaded and it doesnt work...

<a href="#example">Example headline</a>

<h5><a id="example"></a>Example headline</h5>

Where do you load the Javascript File?

Worked like a charm! tks!

Alrighty give this a shot:

HTML

<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>

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

 

Checkout my JS Fiddle

 

Does this work for you?

 

Hi Andrew, thanks for sharing. However, although your code works, It wont prevent the page to reload, which makes the anchor no sense in this case.

Have you found a solution to prevent the reload of the page?

I just figured this out, hope this helps!

Let's say your domain is https://www.yoursite.knack.com/your-page#home

To make an anchor link on the same page, you would do this:

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

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