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?
1 Like
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>
Hello @AndrewGree17327 and @Guilhermeb42087 Is there a way to make this work from one page to another? I want to setup a submit rule on a linked edit form to return a particular section on the parent page using the go to URL submit rule action. Is that possible?