Highlighted

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

Participant ,
Dec 21, 2019

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?

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
ActionScript

Views

527

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Participant ,
Dec 21, 2019

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?

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

TOPICS
ActionScript

Views

528

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 21, 2019 0
Adobe Community Professional ,
Dec 22, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 22, 2019 0
Participant ,
Dec 22, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 22, 2019 0
Adobe Community Professional ,
Dec 23, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2019 0
Participant ,
Dec 23, 2019

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2019 0
Adobe Community Professional ,
Dec 23, 2019

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?

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 23, 2019 0
Participant ,
Dec 24, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 24, 2019 0
Participant ,
Dec 29, 2019

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"});
});

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 29, 2019 0