Angularjs - 使用 $anchorScroll 后需要单击两次后退按钮答案

【问题标题】：Angularjs - Back button needs to be clicked twice after using $anchorScrollAngularjs - 使用 $anchorScroll 后需要单击两次后退按钮
【发布时间】：2016-02-26 19:59:53
【问题描述】：

我正在使用 $anchorScroll 将页面上的滚动条移动到特定位置。就我而言，当我从搜索结果页面单击指向某一剧集的链接时，我想打开包含该剧集的播客页面并向下滚动到该特定剧集所在的位置并播放它。播客页面也可以正常加载，无需滚动或播放剧集。

定位的代码是：

$anchorScroll.yOffset = 70;
$location.hash("episode12345");
$anchorScroll();

我也在使用 $routeProvider 来移动到播客页面，如下所示：

.when("/podcasts/:podcast_name", {
    templateUrl: "podcast.html",
    controller: "PodcastController"
})

在加载播客页面并滚动到所需的剧集位置后，我想通过点击浏览器后退按钮返回搜索结果时会出现问题。不幸的是，它需要点击两次，因为第一次点击只会把我带到我所在页面的顶部。

例如。这是剧集位置的页面网址：

http://localhost:8080/podcasts/Podcast1#16

这是第一次点击后的页面url：

http://localhost:8080/podcasts/Podcast1#16

第二次点击后，我可以返回我最初来自的搜索页面，例如：

http://localhost:8080/results

当页面最初加载时，它似乎先加载没有位置，然后移动到位置。我想这就是为什么我们必须点击两次。有没有办法在该位置先加载页面？

我处理这件事的方式有什么明显错误吗？我对所有这些东西都很陌生...明信片上的答案...

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

解决这个问题的方法是不使用位置哈希，而是将哈希直接放入 $anchorScroll 中，如下所示：

$anchorScroll("episode12345");

这不会更新位置，因此当您点击后退按钮时，它不需要转到页面顶部 - 它只是直接返回到之前的位置。

【讨论】：

效果很好！谢谢！