Do you know how to use anchor links?

Loading last updated info...

<introEmbed
  body={<>
The attribute "name" allows you to link to specific places within the page, via the `<a>` tag.

This is especially useful in long pages that can be separated into sections. You can create a named anchor in each of these section headings to provide "jump-to" functionality. In other words, you can have a different URL for each piece of content on the same page.
  </>}
/>
```html
<h2><a name="get-started"></a>Get Started</h2>
```

**Figure: This is how you add an anchor name to an specific section of your page. Note it doesn't have the hash mark and the anchor tag is empty**

You now have a custom URL that points to the specific section of the page. It is the page URL followed by the hashtag plus the name you chose:


<asideEmbed
  variant="greybox"
  body={<>
    yourpage.com#get-started
  </>}
  figureEmbed={{
    preset: "default",
    figure: "This is how your custom URL will look like",
    shouldDisplay: true
  }}
/>


You can use this new URL to point users to that specific section of your page.

To create a link to your anchor named section inside the same page, simply add a new "href" anchor tag - now with a hash mark followed by the name you chose:

```html
<a href="#get-started">Go to Get Started section</a>
```

**Figure: This is how you add a link to that anchor name you created inside the same page. Remember to add the hashtag**


<asideEmbed
  variant="info"
  body={<>
    **Tip:** Use a hashtag **alone** to link to the top of a page. E.g. `&lt;a href="#"&gt;&Go to top&lt;/a&gt;`
  </>}
  figureEmbed={{
    preset: "default",
    figure: "XXX",
    shouldDisplay: false
  }}
/>

Authors

Need help?

SSW Consulting has over 30 years of experience developing awesome software solutions.

We open source.Loving SSW Rules? Star us on GitHub. Star