滚动仅在刷新页面后有效

Question

在我的第一页上，我有一些按钮（promo1，promo2，promo3等），它们分别指向第二页上标识为“ promo1”或“ promo2”或“ promo3” ...的元素。

因此，当我进入第二页时，我想直接滚动到使用按钮选择的元素。 所以我像这样传递ID：

mysite.com/secondpage/:promo1(/2/3, depends on the button.)

我用得到的ID $routeParams从angularJs 。 但是我有一个非常大的问题：滚动停止在页面中间（也许是因为当元素在屏幕上可见时它停止了，让我知道），但是如果刷新页面，滚动会执行我要求的并停止在元素之上！

这是我目前使用的代码：

$scope.goToAnchor = function(){
        // This is just one of the test I've made, does not work better.

        // if ($routeParams.anchor == ':promoFamily' || $routeParams.anchor == ':promoGroup' || $routeParams.anchor == ':promoCard'){
        //     $scope.anchor = $routeParams.anchor.replace(':','#');
        //     $('html, body').animate({
        //         scrollTop: $($scope.anchor).offset().top
        //     }, 200);
        // }

        // Code I use:

        if ($routeParams.anchor == ':promoFamily' || $routeParams.anchor == ':promoGroup' || $routeParams.anchor == ':promoCard'){
            $location.hash("#");
            $location.hash($routeParams.anchor.replace(':',''));
            $anchorScroll();
        }
    };
    $scope.goToAnchor();

如果您仅提供一些提示，请随时发表评论，只要我现在在此工作2天，它将对我有帮助...

Answer 1

这是因为在调用goToAnchor函数时，元素没有完全加载。 1秒钟后使用$timeout调用$scope.goToAnchor() （根据您的页面加载时间进行更改）。

首先，在控制器中注入$timeout 。 然后，

$timeout(function() {
  $scope.goToAnchor();
}, 1000);

Answer 2

在您的控制器中注入$ timeout，然后像下面那样使用它。

$timeout(function() {
   $scope.goToAnchor();
});

这将有助于在渲染完整视图后调用该函数。