How do I keep on the same page by clicking on internal anchor links, using Aurelia?
Question
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!
2 answers
solution1
5 ACCPTED 2019-02-08 13:55:50
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>
solution2
0 2019-02-08 13:46:05
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.