Angularjs - 使用$ anchorScroll

时间:2016-01-17 15:13:38

标签: javascript angularjs

我使用$ anchorScroll将页面上的滚动条移动到特定位置。在我的情况下,当我从搜索结果页面点击一集的链接时,我想打开包含该剧集的播客页面并向下滚动到该特定剧集的位置并播放它。播客页面也可以正常加载,不需要任何滚动或播放剧集。

进行定位的代码是:

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

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

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

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

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

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

这是首次点击后的网页网址:

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

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

http://localhost:8080/results

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

我出现这种情况的方式有什么明显的错误吗?我对所有这些东西都很陌生......明信片上的答案......

1 个答案:

答案 0 :(得分:1)

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

$anchorScroll("episode12345");

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