Question

注意：我还没有解决这个问题。这篇文章似乎描述了我的问题的解决方案，因为我正在使用ngRoute并使用更新版本的Angular，但我无法使她的解决方案有效：https://stackoverflow.com/a/35028895/6647188

在我的单页应用中：https://kylevassella.github.io/
我正在尝试将我的导航按钮链接到不同视图上的哈希链接。我一直在使用接受的答案寻求帮助：How to handle anchor hash linking in AngularJS

但我在我的网站上实施（$anchorScroll）时遇到了问题。

看看我在说什么：

我的Plunker：https://plnkr.co/edit/fgTG7j?p=info 使预览窗口足够宽，以便导航菜单（'Home Portfolio Contact'）显示在顶部。
向下滚动到“项目”，单击“项目1”。这打开了一个新视图＆amp; ng-show启用了不同的导航栏（看起来与导航栏相同）旧。在<section ng-show="showPortfolioHeader">下方查看这些导航锚的index.html）。
从这里我想要 '投资组合'＆amp; “联系”链接到#portfolio＆amp; ＃联系我的views/home.html视图中的哈希链接ID。但他们只带我到正确的路线（views/home.html），而不是他们各自的路线滚动页面上的点。
注意：在Plunker上，这些甚至没有链接到正确的路线，他们带我到404.这不是问题 - 在我的本地机器上这部分工作正常。我的问题是，一旦我到达views/home.html视图，浏览器就不会滚动到哈希链接。

Answer 1

编辑：我一直在看这个错误。

您永远不会改变路线，这就是您的卷轴无法正常工作的原因。

您的初始菜单是使用常规的anchorScroll内容捕获的。

但是当你稍后隐藏那个并且显示组合标题＆＃34;时，你链接到不新路线的东西。 <a href="/?scrollTo=contact">仍然是/路线，只有一些参数。因此，您的路线永远不会改变，路由器也不会做出反应。

如果不详细说明为什么你有不同的菜单，我会说在投资组合标题中你最好使用ng-click而不是href，并以编程方式触发滚动。

或者更好的是，只需合并两个菜单，它们就足够相似了。只显示隐藏英雄容器，而不是整个菜单。

~~如果我正确理解了这个问题，那就是你的问题：~~

href="/?scrollTo=contact"

将其更改为

href="#/?scrollTo=contact"

你的scrollTo有效。这是因为如果您的浏览器（例如Chrome）看到href的{{1}}，则会显示＆＃34;啊，这是一个真正的链接！致/?scrollTo=contact（或/。它会立即导航，无需提供JavaScript（和角度）时间。

但是当您在链接前添加index.html时，浏览器无法导航，它知道它需要保持在同一页面上，只需要不同的锚点。现在，这可以让Angular有时间抓住你的点击并使用它。

作为旁注：由于您的本地开发环境可能会重定向与index.html不匹配的所有内容，这就是为什么本地部分工作的原因 - 在plunker上它试图转到 it＆＃39; s 带有该链接的主页，但他们没有，所以它会给你404.

<击>

Answer 2

嗨，我不知道您是否解决了这个问题，但这就是我所做的，对我有用：）

<a ng-click="scrollTo($event, id)">dasdsa</>
<div id="id"></div>
/// ctrller
$scope.scrollTo = function(event, id){
   event.preventDefault();
   var old = $location.hash();
   $anchorScroll();
   $location.hash(old);
}

哈希链接与路由 - `$ anchorScroll`故障排除

2 个答案: