Как мне остаться на той же странице, нажав на внутренние якорные ссылки, используя Aurelia? - PullRequest
0 голосов
/ 08 февраля 2019

Я работаю над руководством по стилю для проекта, и в настоящее время я хотел бы иметь базовое поведение при щелчке по ссылкам привязки, чтобы они прокручивались до соответствующего идентификатора.

Например:

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

Это прокручивается до:

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

В Aurelia поведение по умолчанию состоит в том, что ссылки рассматриваются как маршруты.Я не могу заставить работать внутреннюю ссылку, так как она сразу отправляет меня на внешнюю страницу.

Кто-нибудь знает, как решить эту проблему?Спасибо!

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

Вы можете отключить перегрузку маршрутизатора Aurelia несколькими различными способами, как указано в документации .Одним из способов является использование одного из следующих специальных атрибутов:

<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>
0 голосов
/ 08 февраля 2019

Просто добавьте обработчик событий щелчка к вашей ссылке и используйте scrollIntoView () .

Вот рабочая скрипка, откройте ее на полноэкранной странице, чтобы проверить ее:)

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...