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

Angularjs - Back button needs to be clicked twice after using $anchorScroll

本文关键字：单击 两次 按钮 anchorScroll Angularjs      更新时间：2023-09-26

我正在使用$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

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

我的做法有明显的问题吗？我对所有这些东西都很陌生...明信片上的答案...

解决此问题的方法不是使用位置哈希，而是像这样将哈希直接放入$anchorScroll中：

$anchorScroll("episode12345");

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

相关文章：