Skip to main content
C
christofutti
Inspiring
December 22, 2019
Answered

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

  • December 22, 2019
  • 1 reply
  • 1373 views

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?

This topic has been closed for replies.
Correct answer ClayUUID

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.

1 reply

C
ClayUUID
Legend
December 22, 2019

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

C
christofuttiAuthor
Inspiring
December 22, 2019

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

C
ClayUUIDCorrect answer
Legend
December 23, 2019

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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices