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

Question

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

进行定位的代码是:

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

我还使用 $routeProvider 移动到播客页面，如下所示:

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

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

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

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

这是第一次点击后的页面网址:

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

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

http://localhost:8080/results

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

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

Answer 1

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

$anchorScroll("episode12345");

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