带有路由的哈希链接 - `$anchorScroll` 故障排除答案

【问题标题】：Hash linking with routing - `$anchorScroll` troubleshooting带有路由的哈希链接 - `$anchorScroll` 故障排除
【发布时间】：2017-05-20 13:04:51
【问题描述】：

注意：我还没有解决这个问题。这篇文章似乎描述了我的问题的解决方案，因为我使用的是 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”。这将打开一个新视图 & ng-show 启用不同的导航栏（看起来与老的。看下面<section ng-show="showPortfolioHeader"> in index.html 这些导航锚）。
从这里我想要 “Portfolio”和“Contact”链接到#portfolio 和#contact 我的views/home.html 视图中的哈希链接 ID。但他们只带我到正确的路线（views/home.html），而不是各自的路线页面上的滚动点。
注意：在 Plunker 上，这些甚至没有链接到正确的路线，它们将我带到 404。这不是问题 - 在我的本地机器上，这部分工作正常。我的问题是，一旦我进入views/home.html 视图，浏览器就不会滚动到哈希链接。

【问题讨论】：

附带说明，plunker 很棒，但直接在问题中显示一些代码也是一个好主意。例如，在这种情况下，这将是有问题的两个 ng-show、ng-hide 导航块。

标签： jquery angularjs scrollto plunker anchor-scroll

【解决方案1】：

编辑：我一直在看错。

你永远不会改变路线，这就是你的滚动条不工作的原因。

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

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

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

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

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

href="/?scrollTo=contact"

改成

href="#/?scrollTo=contact"

你的 scrollTo 工作。那是因为如果您的浏览器（例如 Chrome）看到 href 和 /?scrollTo=contact，它会说“啊，一个真正的链接！到 /（或 index.html。它会立即导航，而无需提供 JavaScript（和 angular ) 上班时间。

但是当您在链接前添加# 时，浏览器不会导航，它知道它需要保持在同一页面上，只是不同的锚点。现在这让 Angular 有时间捕捉您的点击并使用它。

附带说明：由于您的本地开发环境可能会将所有与 index.html 不匹配的内容重定向，这就是为什么该部分在本地工作的原因 - 在 plunker 上它会尝试使用它转到它的主页链接，但他们没有它，所以它会给你 404。

【讨论】：

感谢您的回复。在通过 http-server 在本地机器上进行测试时，我在 / 之前尝试了 # 和 #! 的所有组合，但均无济于事。在我的本地测试中，当我将其设为href=“#/?scrollTo=contact” 时，它根本停止重定向。只有当我删除 # 时，它才会重定向到正确的视图，但是我遇到了它没有滚动到哈希链接的问题，正如你所描述的那样（Angular 和 JS 没有时间工作）。这是否意味着这个策略在我的本地机器上不容易测试，我需要上传它来测试它？
最后一点 - 在我的本地测试中，URL 有一个 hashbang #! 而不是一个哈希 - 我不知道原因或它是否有任何意义。我在href 中的/ 之前尝试了#! 和#，这导致链接在我的本地计算机上根本不起作用。
更新：我已将我的项目上传到网络上，以便您更轻松地查看：kylevassella.github.io 它仍然使用 hashbang 而不是单个哈希 - 我不知道这有什么意义。在指定的nav 项目上，您会看到我尝试了在href 中使用scrollTo= 的3 种不同方式。唯一重定向页面的是“联系”按钮，它在href 中仅使用/。
@KyleVassella 啊，我已经 fork 了这个项目，在本地检查了一下，发现了问题。你永远不能改变路线。
我很抱歉忽略了您的回答 - 这周非常忙碌。我确实尝试了一些方法，例如删除我的第二个导航但无济于事（尽管您是对的，删除它是理想的）。我的问题顶部的 URL 指向一个女孩的帖子，她说了类似的话（使用 ng-click, ）。我试过了，但一定错过了什么。你说我的路线永远不会改变。但是，当我使用<a href="/?scrollTo=contact"> 时，我会从JC-Reaty.html 视图转到home.html 视图。这是否意味着路线改变了，或者不一定？

【解决方案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);
}

【讨论】：