如何使用 Aurelia 通过单击内部锚链接保持在同一页面上？
Posted
技术标签:
【中文标题】如何使用 Aurelia 通过单击内部锚链接保持在同一页面上？【英文标题】：How do I keep on the same page by clicking on internal anchor links, using Aurelia? 【发布时间】：2019-07-02 18:27:54 【问题描述】：我正在为一个项目编写样式指南，目前我希望在锚链接上有一个基本的点击行为，以便它们滚动到对应的 id。
举个例子：
<a href="#section"></a>
向下滚动到：
<div id="section"></div>
在 Aurelia 中，默认行为是将链接视为路由。我无法使用内部链接，因为它会立即将我转到外部页面。
有人知道如何解决这个问题吗？谢谢！
【问题讨论】：
【参考方案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>
【讨论】：
非常感谢。路由器忽略就像一个魅力;）【参考方案2】：只需向您的链接添加一个点击事件处理程序并使用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 通过单击内部锚链接保持在同一页面上？的主要内容，如果未能解决你的问题，请参考以下文章