滚动仅在刷新页面后有效

Question

On my first page I have some buttons (promo1, promo2, promo3,...) who respectively lead to the element with the id "promo1" or "promo2" or "promo3",... on the second page.

So when I land to the second page I want to scroll directly to the element I choosed with the button. So I pass the id like that:

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

and I get the id by using $routeParams from angularJs . But I have a really huge problem: the scroll stop on middle of the page (maybe because it stop when the element is viewable on screen, let me know), but if I refresh the page, the scroll do what I ask for and stop on top on the element!

Here is the code I use at the moment:

$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();

Event if you have only some hints, be free to leave a comment, it will help me as long as i'am working on this for 2 days now...

Answer 1

This is because your elements are not fully loaded when your goToAnchor function is being called. Use $timeout to call $scope.goToAnchor() after 1 second(change it according to your page load time).

First, inject $timeout in your controller. Then,

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

Answer 2

Inject $timeout in your controller, and use it like below.

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

This will help calling the function after rendering the full view.