CODEWITHSUNDEEP
javascripttypescriptroutesaurelia
nara92
nara92

Reputation: 153

How do I keep on the same page by clicking on internal anchor links, using Aurelia?

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!

Upvotes: 6

Views: 507

Answers (2)

Henrik Erstad
Henrik Erstad

Reputation: 691

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>

Upvotes: 5

Silvio Biasiol
Silvio Biasiol

Reputation: 953

Just add an click event handler to your link and use scrollIntoView().

Here is a working fiddle, open it in a full screen page to test it :)

document.getElementById('myLink').onclick = function(e){
  document.getElementById('myDiv').scrollIntoView();
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<a id="myLink">Click me!</a>
    <br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>  
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>  
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>  
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
    .<br/>
  <div id="myDiv">Hi there!</div>
</body>
</html>

Upvotes: 0

Related Questions