javascript - 使用 AngularJS $anchorScroll 滚动到另一个页面的 anchor 标记

标签 javascript html angularjs

我需要从我的 AngularJS 主页滚动到另一个页面中的 anchor 标记。这两个页面都基于 url 作为部分 html 进入 ng-view 组件。在启动服务器时,主页被加载,需要从那里转到常见问题解答页面。我使用带# 的普通href,但没有指向目标页面中的正确div。这是我用 $anchorScroll

尝试的

这是 Controller 方法

	
$scope.scrollToFaq = function(id) {
   $location.path("/faq")
   $location.hash(id);
   $anchorScroll();
}

这是我在 home.html 中的使用方式

<a ng-click="scrollToFaq('HERE')" href="" class="link">Here</a>

但这不能正常工作。如果我直接加载常见问题解答页面然后返回并单击主页上的 anchor 链接,它就可以工作。是否可以使用 `$anchorScroll

来做到这一点

最佳答案

尝试使用 Angular 的 $timeout 服务。

$scope.scrollToFaq = function(id) {
 $location.path("/faq");
 $timeout(function(){
   $location.hash(id);
   $anchorScroll();
 }, delay);

此处 delay 是您希望等待 anchor 滚动发生的时间。我读过大约 300 毫秒/400 毫秒为人们工作。当我遇到这个问题时,我只需要调用 $timeout 中的 $anchorscroll。因此,请使用最适合您的情况。

注意:我正在寻找不使用 $timeout 的解决方案。当我找到一个时会更新。

关于javascript - 使用 AngularJS $anchorScroll 滚动到另一个页面的 anchor 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29034349/

相关文章:

javascript - 单击 anchor 标记时从不同页面传递 Angular 值

javascript - 如何使用 AngularJS 下载并上传图像

html - 不同的 CSS 元素不在一条线上

javascript - 用PHP打开一个新函数

html - 已更改(但未添加/删除)的内容的正确 HTML 标记是什么?

javascript - 如何使用页面操作为每个 url 显示弹出窗口?

angularjs - Angular 2 : Trouble with Custom Components

javascript - 根据子状态 Angular 更改父状态/类别

javascript - 如何在 Facebook 应用内浏览器中接收邮件?

javascript - ASPxGridView 停止回调