使用AngularJS$anchorScroll滚动到另一个页面的锚标签

Question

从我的AngularJS主页，我需要滚动到另一个页面中的锚定标记。基于url，这两个页面都作为部分html进入ng视图组件。启动服务器时，会加载主页，然后需要从主页转到常见问题页面。我使用了带有#的普通href，但它没有指向目标页面中的正确div。下面是我用$anchorScroll尝试的内容

这里是控制器方法

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

这是我在家里使用它的方法。html

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

但这并不能正常工作。如果我直接加载faq页面，然后返回并单击主页上的锚定链接，它就会工作。是否可以使用“$anchorScroll”执行此操作

Answer 1

有同样的问题。但修复了它：）想法是更改到URL，等待半秒钟，然后跳转到锚。

HTML：

<a href="" ng-click="goToAnchor('/', 'links')">Links</a>

控制器：

angular.module('exampleApp').controller('NavbarCtrl', function ($scope, $location, $timeout, $anchorScroll) {
      $scope.goToAnchor = function(path, anchor){
          $location.path('/');

          $timeout(function() {
             $anchorScroll(anchor);
          }, 500);
      };
});

Answer 2

听起来像是一个与历史相关的问题。如果div已经加载，则立即找到它。这个解决方案在过去对我有用。也许是等待页面加载的想法。

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

Answer 3

尝试使用Angular的$超时服务。

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

这里的延迟是您希望等待锚定滚动发生的时间。我读到过有关300毫秒/400毫秒为人工作的文章。当我遇到这个问题时，我只需调用$超时内的$anchorscroll。因此，请使用最适合您的案例。

注意：我正在寻找一种不使用超时的解决方案。当我找到一个时将更新。