Question

在我的第一页上，我有一些按钮（promo1，promo2，promo3，...），它们分别带有id＆＃34; promo1＆＃34;或＆＃34; promo2＆＃34;或者＆＃34; promo3＆＃34;，......在第二页上。

所以当我登陆第二页时，我想直接滚动到我用按钮选择的元素。所以我通过这样的id：

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

我使用$routeParams中的angularJs获取了ID。但是我有一个非常大的问题：页面中间的滚动停止（可能是因为当元素在屏幕上可见时停止，让我知道），但是如果我刷新页面，滚动按照我的要求停止并停止在元素的顶部！

以下是我目前使用的代码：

$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函数时，元素未完全加载。使用$timeout在1秒后拨打$scope.goToAnchor()（根据您的页面加载时间更改）。

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

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

Answer 2

在控制器中注入$ timeout，并使用如下所示。

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

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

滚动仅在刷新页面后起作用

2 个答案: