1

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

在我的单页应用程序上：https
://kylevassella.github.io/ 我正在尝试将我的导航按钮链接到不同视图上的哈希链接。我一直在这里使用公认的答案寻求帮助：如何在 AngularJS 中处理锚散列链接

但我$anchorScroll在我的网站上实施 ( ) 时遇到了麻烦。

看看我在说什么：

  1. 我的 Plunker：https ://plnkr.co/edit/fgTG7j?p=info 使预览窗口足够宽，以便导航菜单（“家庭投资组合联系人”）出现在顶部。

  2. 向下滚动到“项目”，单击“项目 1”。这将打开一个新视图并 ng-show启用不同的导航栏（看起来与旧的相同。在下面<section ng-show="showPortfolioHeader">查看 index.html这些导航锚）。

  3. 从这里我希望“投资组合”和“联系方式”链接到我views/home.html认为的#portfolio 和#contact 哈希链接 ID。但他们只带我到正确的路线 ( views/home.html)，而不是他们各自在页面上的滚动点。
    注意：在 Plunker 上，这些甚至没有链接到正确的路线，它们将我带到 404。这不是问题- 在我的本地机器上，这部分工作正常。我的问题是，一旦我进入views/home.html视图，浏览器就不会滚动到哈希链接。

4

2 回答 2

1

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

您永远不会更改路线，这就是您的滚动条无法正常工作的原因。

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

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

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

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

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

href="/?scrollTo=contact"

将其更改为

href="#/?scrollTo=contact"

你的 scrollTo 工作。这是因为如果您的浏览器（例如 Chrome）看到href带有 a 的 a /?scrollTo=contact，它会说“啊，一个真正的链接！到/（或index.html.）它会立即导航，而不给 JavaScript（和角度）时间工作。

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

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

于 2017-01-09T09:54:14.677 回答
1

嗨，我不知道你是否解决了它，但这是我所做的，它对我有用:)

<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);
}
于 2018-12-20T18:44:56.877 回答