javascript - ¿Cómo puedo mantenerme en la misma página al hacer clic en enlaces de anclaje internos, usando Aurelia?

Estoy trabajando en una guía de estilo para un proyecto y actualmente me gustaría tener un comportamiento básico de clic en los enlaces de anclaje, para que se desplacen al id correspondiente.

Como ejemplo:

<a href="#section"></a>

Eso se desplaza hacia abajo a:

<div id="section"></div>

En Aurelia, el comportamiento por defecto es tratar los enlaces como rutas. No puedo hacer que funcione el enlace interno, ya que inmediatamente me envía a una página externa.

¿Alguien sabe cómo superar este problema? ¡Gracias!

Respuesta #1

Puedes desactivar que el enrutador de Aurelia secuestre el enlace de varias maneras diferentes, según la documentación. Una de las maneras es usar uno de estos atributos especiales:

<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>

Respuesta #2

Solo añade un controlador de eventos de clic a tu enlace y usa scrollIntoView().

Aquí hay un fiddle funcional, ábrelo en una página de pantalla completa para probarlo :)

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>