PSC.Blazor.Components.AnchorLink 1.0.2

AnchorLink for Blazor

An anchor link is a web link that allows users to leapfrog to a specific point on a website page. It saves them the need to scroll and skim read and makes navigation easier.

We have anchor (HTML tag a) everywhere and it is quite easy to create one

<a href="https://yourlink">Try me</a>

In HTML, you can add links in the same page using the # for example:

<a href="#chaper1">Jump to Chapter 1</a>

<h2 id="chapter1">Chapter 1</h2>
<p style="margin-bottom: 120px;">
    A paragraph with a huge bottom margin to make the page scroll.
</p>

When you click on the first link, the browser jumps to the h2 with id chapter1. Easy right? Unfortunately, we can't use this kind of link in Blazor.

How to use it

This component uses a bit of JavaScript to jump to the position with the requested id. For that, in the index.html you have to add in the script section at the end of the page the following line:

<script src="_content/PSC.Blazor.Components.AnchorLink/js/anchorLink.js"></script>

Then, in your page you have to replace the a with the component AnchorLink. Using the example above, the code becomes:

<AnchorLink href="#chaper1">Jump to Chapter 1</AnchorLink>

<h2 id="chapter1">Chapter 1</h2>
<p style="margin-bottom: 120px;">
    A paragraph with a huge bottom margin to make the page scroll.
</p>

Easy peasy!