可以在Angularjs中使用锚链接吗?
即:
<a href="#top">Top</a> <a href="#middle">Middle</a> <a href="#bottom">Bottom</a> <div name="top"></div> ... <div name="middle"></div> ... <div name="bottom"></div>
谢谢
看来有几种方法可以做到这一点。
Angular提供了一项$anchorScroll服务,但文档严重缺乏,我无法使其正常工作。
$anchorScroll
请访问http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by- id.html,以获取有关的一些见解$anchorScroll。
我测试的另一种方法是创建自定义指令并使用el.scrollIntoView()。通过基本上在指令链接函数中执行以下操作,此方法相当不错:
el.scrollIntoView()
var el = document.getElementById(attrs.href); el.scrollIntoView();
但是,当浏览器本机支持这两个功能时,同时执行这两个操作似乎有点过头了,对吧?
如果您看一下http://docs.angularjs.org/guide/dev_guide.services.$location及其“ HTML链接重写”部分,则会发现以下链接未重写:
包含目标元素的链接 例: <a href="/ext/link?a=b" target="_self">link</a>
包含目标元素的链接
例: <a href="/ext/link?a=b" target="_self">link</a>
<a href="/ext/link?a=b" target="_self">link</a>
因此,您要做的就是将target属性添加到链接中,如下所示:
target
<a href="#anchorLinkID" target="_self">Go to inpage section</a>
Angular默认为浏览器,由于它是锚链接而不是其他基本URL,因此浏览器可根据需要滚动到正确的位置。
我之所以选择选项3,是因为它最好地依靠此处的本机浏览器功能,从而节省了我们的时间和精力。
要注意的是,在成功完成滚动和哈希更改之后,Angular会继续跟踪并将哈希重写为其自定义样式。 但是,浏览器已经完成其业务,您一切顺利。