Menu
I am working on a styleguide for a project and currently I would like to have a basic clicking behaviour on anchor links, so that they scroll to the correspondent id.
As an example:
<a href="#section"></a>
That scrolls down to:
<div id="section"></div>
In Aurelia, the default behaviour is to treat links as routes. I can't get the internal link to work, as it immediately sends me to an external page.
Does someone know how to overcome this issue? Thanks!
253
An anchor link is a link that allows users to flow through a website page. It helps to scroll and skim read easily. A named anchor can be used to link to a different part of the same page (like quickly scrolling) or to a specific section of another page. Let’s see how to jump to a marked section of the page by using the <a> tag.
The following examples use #top and #bottom with the <a> tag and href attribute to link to that section of the page. This method is similar to using "id," but you don't have to pick a specific element. Click "Top" or "Bottom" in the Results section to see what happens.
Link to the anchor from another web page ¶ You can link to your anchor link from other websites, as well. For that, add the URL followed by # and the anchor value. There are two types of such usage.
Create a hyperlink by using the id of the link target, preceded by #. <a href="#anchor-name">Jump to the part of the page with the “anchor-name” id </a> Now, just add the preferred text, and you will be able to fly through the page sections. Example of creating a jumping anchor link: ¶
You can disable the Aurelia router highjacking the link in several different ways, as per the documentation. One of the ways is to use one of these special attributes:
<a href="/some/link" download>Skip Hijacking</a>
<a href="/some/link" download="">Skip Hijacking</a>
<a href="/some/link" router-ignore>Skip Hijacking</a>
<a href="/some/link" router-ignore="">Skip Hijacking</a>
<a href="/some/link" data-router-ignore>Skip Hijacking</a>
<a href="/some/link" data-router-ignore="">Skip Hijacking</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
