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

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


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>


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>