$ anchorScroll和$ location仅在第二次尝试后才有效

Question

我正在尝试使用$anchorScroll和$location.hash()滚动到div。我在页面顶部有一个底部。当我点击底部时，我希望页面向下滚动到我有<div id="target">页面的底部。

出于某种原因，我第一次点击按钮，我的页面不会滚动。如果再次单击，则页面会滚动。然后滚动工作正常。如果我刷新页面，可以重现这种奇怪的行为。

我的控制器中有这个代码：

$scope.scrolldown = function() {
  $location.hash('target');
  $anchorScroll();
}

我知道$location.hash('target')行应该在我的URL末尾添加一个哈希值。

这是我的网页首次加载时的网址：

http://run.plnkr.co/iqvdGjdeCP4idP4D/

第一次点击我的按钮后，它变为：

http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target

哪个不对（页面没有正确滚动）。

第二次点击我的按钮后，它变为：

http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target#target

从页面上的这一点开始正确滚动，但URL对我来说仍然很奇怪 - 为什么我需要两个哈希值？

我想知道为什么按钮仅在第二次点击后才有效，以及如何纠正它。

更新

我添加了路由到我的代码，滚动工作正常。 这是 my plunker demo with routing.

Answer 1

看看这个问题，其中包含一个可能的解决方案： Supress reloading of ui-router based view on query parameter change

第二次单击按钮时它会起作用，因为哈希不会改变（因此路径不会重新加载）。第一次点击它时，请注意页面是否闪烁？这表明整个DOM已被重新渲染。