Angular.js: Angular 应该提供一种滚动到页面上特定元素的方法

创建于 2010-11-01  ·  10评论  ·  资料来源: angular/angular.js

片段标识符(哈希)通常用于链接到长页面中的特定位置。 这不适用于 angular,因为散列用于实现路由。 应该提供一种将页面向下滚动到特定元素的方法。

feature

所有10条评论

是的,然后,我们应该将它与 $location 一起使用 - 现在,我们也支持哈希,所以每当 $location.hash() 更改时,我们应该滚动到它......

这已经实施了。 如果 $location 在 html5 模式下运行,则只需创建href="#anchor"链接

抱歉打扰了,但如果我们不在 html5 模式下怎么办? 请参阅这两个小提琴以供参考:
http://jsfiddle.net/gabrielstuff/SdGnR/使用路由器并破坏锚链接。
和这个
http://jsfiddle.net/gabrielstuff/nYxFg/不使用任何路由器并正确允许沿同一页面跳转。

也不是尝试使用 HTML5 没有太大帮助(但这是另一张票)

我也有同样的问题。 我不是在 html5 模式下。 这将如何在 hashbang 模式下工作?

我同意这种行为非常出乎意料。 即使有人没有使用 HTML5 模式,Angular 也不应该在使用带有锚点的散列时破坏这种预期行为。

据我了解,无论如何,Angular 都应该简单地忽略任何带有显式哈希值的链接。 如果我们不使用 HTML5,链接<a href="/something"...将自动被重写为/#/something (除非我的目标是_self )。 所以<a href="#something"应该总是去/#something

+1

我认为你应该使用anchorScroll来做到这一点。

只是好奇@IgorMinar我们能否就这个问题是否会得到解决发表评论? 有人可能会争辩说,它不需要基于未完全支持过时的浏览器,但我认为关于锚链接是否应与不支持历史 API 的浏览器一起使用的明确答案。

但是我遇到了问题,如果我在#/route1,那么就很难在#/route1#anchor。 这里提到的 hack (http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html) 似乎没问题,但如果这“有效”,那将是理想的。 无论如何,如果$anchorScroll hack 是解决方案,那么这样说可能很好,也许有人可以更新文档以反映如何为旧浏览器解决此问题。

这里 (http://stackoverflow.com/a/15935517/2071612) 是一个绝妙的解决方案。

顺便说一句,我已经提交了一个 PR (#9596) 来添加对独立于$location.hash()滚动的支持。

此页面是否有帮助?
0 / 5 - 0 等级