Linking to blocks within a page

Sometimes you need to let the user scroll to a certain block within the same page. This can be done by setting the scrollId on the block data. This will also allow deep-linking to the provided scroll id.

{
  "statusCode": 200,
  "data": {
    "title": "Home",
    "data": {},
    "blocks": [
      {
        "id": "DummyComponent",
        "data": {
          "scrollId": "awesome-dummy-component"
        }
      }
    ]
  }
}

If you open the home page with the following url: ./home#awesome-dummy-component, it will scroll to the desired position on the page.

Animating to a block

When the route changes because of a new hash the page will automatically try to find the newly provided hash and scroll to it. Linking to a block is just as simple as linking to any other internal page.

<ButtonDummy
  componentId="ButtonDummy"
  title="Title goes here"
  label="Label goes here"
  :type="ButtonType.LINK"
  :link="{
    type: LinkType.INTERNAL,
    target: '/dummy-target#awesome-dummy-component'
  }" />