Question

我正在为一个项目制作样式指南，目前我希望锚链接具有基本的单击行为，以便它们滚动到对应的id。

例如：

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

向下滚动到：

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

在Aurelia中，默认行为是将链接视为路由。我无法使用内部链接，因为它会立即将我发送到外部页面。

有人知道如何克服这个问题吗？谢谢！

Answer 1

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

Answer 2

只需在您的链接中添加一个click事件处理函数，然后使用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>

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

2 个答案: