Copy link to clipboard
Copied
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?
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.
Copy link to clipboard
Copied
Explain exactly what you mean by "link" and "anchor point".
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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"});
});