如何使用 Aurelia 通过单击内部锚链接来保持在同一页面上？

Question

我正在为一个项目编写样式指南，目前我希望在锚 link 上有一个基本的点击行为，以便它们滚动到相应的 id。

举个例子：

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

向下滚动到：

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

在 Aurelia 中，默认行为是将 link 视为路由。我无法让内部 link 工作，因为它会立即将我发送到外部页面。

有人知道如何解决这个问题吗？谢谢！

Answer 1

只需将点击事件处理程序添加到您的 link 并使用 scrollIntoView()。

这是一个有效的 fiddle，在全屏页面中打开它进行测试:)

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>

Answer 2

根据 documentation，您可以通过几种不同的方式禁用劫持 link 的 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>

如何使用 Aurelia 通过单击内部锚链接来保持在同一页面上？

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

javascript

routes

typescript

aurelia