Angular Anchor Scroll without Promise

Question

I have am trying to use a very simple scrollTo in Angular 1.x. I have naviagation menu link which when clicked should scroll to a div#id. I can only get this to work with a 'promise'.

For example, this works:

<li><a href="#" ng-click="tracking()">Go to Tracking</a></li>


$scope.tracking = function() { // go to tracking when header button is clicked
        $http.get('/includes/modules/get_home_destinations.php')
        .then(function(reply){
            if (reply.data) {
                $scope.destinations = reply.data;
                $location.hash('home-tracking');
            }         
        });
    };

But this doesn't respond:

$scope.tracking = function() { // go to tracking when header button is clicked
     $location.hash('home-tracking');
};

It's as if a promise is required, but to get this to work on the simple click without the promise?

@MuhammedHasanCelik it worked! Why does the href cause an issue? — Alan A
– Alan A, Commented Sep 16, 2017 at 10:50

Muhammed Hasan Celik · Accepted Answer · 2017-09-16 11:03:06Z

1

This is because of href="#" as I guess. Because firstly, href redirects page to "#" then the promise is executed with time delay and redirect back page to the desired location. But without promises, there is no time delay, code is executed immediately and href redirects page to '#' and page stuck there.

edited Sep 16, 2017 at 11:03

answered Sep 16, 2017 at 10:57

Muhammed Hasan Celik

6821 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chandru · Accepted Answer · 2017-09-16 10:43:35Z

1

Hope this below code will be usefull :

in html file

<div id="home-tracking">
    <h1>Home Traking Content</h1>
</div>

<a ng-click="tracking()">Go to Tracking</a>

in controller file

angular.module('trackingApp').controller('TrackingCtrl', function($location, $anchorScroll) {
    $scope.tracking = function() {
          $location.hash('home-tracking');
          $anchorScroll();
    }
})

answered Sep 16, 2017 at 10:43

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

1 Comment

Alan A Over a year ago

I think this will also work - seems the href was the cause of the issue?

Collectives™ on Stack Overflow

Angular Anchor Scroll without Promise

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related