Ability to Anchor to sections (components) on a page.

[hokienick]

There are many times we would like to insert a button link in a banner that when clicked would scroll down to the pertinent information on the page.

There are 2 asks for this ticket:

1. The ability to anchor to a particular section of the page
Whether a Content Block or a Viewport with other components comprising it, please allow us to have the ability to anchor to that section. For example:
<PrimaryButton to="/#challenges">Go To Challenges</PrimaryButton>
and that button will auto scroll to that section of the page, which is a Content Block

2. Animation scrolling for all anchors globally
This may require some javascript work, but let's make a global change where whenever an anchor button/link is clicked, the page scrolls down to the called section.

Let me know if you have any questions!

[kkartunov]

@hokienick

1. Is already present. You can anchor by id. Just add id="anchorId" to the desired target. Then in the button/link use <PrimaryButton to="#anchorId">Go To Challenges</PrimaryButton>. I have made an example here: https://app.contentful.com/spaces/b5f1djy59z3a/entries/6pBFje1uCIw4OKk8U4uuKo

2. Not sure if global scroll handler can capture and animate. Have to check that but it will probably require special HTML markup that JS will need to bind the listeners.

[hokienick]

@kkartunov

1. So the ask for this is to anchor to the beginning of the entire content block in your example. Sometimes a header does not lead off the page so we are unable to provide an "id" to a tag. Sometimes it may be a viewport that contains a row of cards, we may want to anchor there as well.

2. Sounds good! Let's bind those listeners :)

[kkartunov]

@hokienick ready. We can now anchor to viewports, content blocks(also inside other viewports). Check the example how to use it: https://app.contentful.com/spaces/b5f1djy59z3a/entries/6pBFje1uCIw4OKk8U4uuKo