link a button to an anchor point outside of the animation but on the same html page

[christofutti]

i'm trying to link a button to an anchor point outside of the animation but on the same html page. the animation is just part of the page and there is other html stuff below it. is this doable?

[ClayUUID]

Explain exactly what you mean by "link" and "anchor point".

[christofutti]

i want a button that when clicked on in the the animate canvas, takes the user to another part of  the page which is outside of the canvas to an anchor point in the html, like #about

i have a boostrap navbar on my page, not a part of the animate canvas, that has buttons that when clicked, move the page using a scrolling effect to another part of the page and i want to be able to do the same thing from some buttons in the animate canvas. my navbar button looks like this:

<a class="nav-link scroll" data-toggle="collapse" data-target=".navbar-collapse.show" href="#about">ABOUT<span class="sr-only">(current)</span></a>

so, ideally, i'd like the scrolling part to work but at least i'd like the link to the anchor to work without the scroll

[ClayUUID · Accepted solution]

Okay, you meant to navigate to an anchor tag. If you can also assign an ID to the anchor elements, this is trivial:

this.myButton.addEventListener("click", function() {
	document.getElementById("aboutAnchor").scrollIntoView({behavior:"smooth"});
});

This will smoothly scroll in Firefox and Chrome, but jump instantly in IE and Edge (old version). If your Canvas isn't embedded directly into the page you'll have to adjust the "document" path as needed.

[christofutti]

thanks, i imagine that i am missing some small thing but when i paste this exact code as the action for the button, it doesn't work. and, yes, the embedded animate canvas is on the same html page.

i put the following further down the page:

<h3 align="center" id="about">ABOUT</h3><h3 align="center" id="aboutAnchor">aboutAnchor</h3>

[ClayUUID]

Then you engage in the usual debugging steps.

Are any errors appearing in the dev console?

Is the button event handler function even being called?

Is getElementById successfully getting anything?

[christofutti]

thanks, i don't know enough to answer these questions. when i paste the code above into actionscript, it doesn't work. thank you for trying.

[christofutti]

ok this worked when i got the button name and achor name right. thanks

this.button.addEventListener("click", function() {
document.getElementById("about").scrollIntoView({behavior:"smooth"});
});