angularjs - $anchorScroll 和 $location 只有在第二次尝试后才有效

Question

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

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

我的 Controller 中有这段代码:

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

我知道 $location.hash('target')行应该将哈希值附加到我的 URL 的末尾。

这是我的页面首次加载时的 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 已被重新渲染。