AnchorScroll only works after second click

Question

I believe I am experiencing the same issue mentioned here: $anchorScroll and $location only work after second try

I reviewed the plunker that works and I have routing in place, but it is still taking two clicks. I am using ng-route and not ui-router. How can I prevent it taking two clicks to get anchorScroll to work? As the first wants to cause a route to be established versus scrolling to the appropriate anchor.

Here is the click:

<a data-ng-click="gotoRequests()">Requests</a>

Here is the destination:

<div id="pendingrequests"></div>

Here is the function in my controller:

    $scope.gotoRequests = function() {
        // set the location.hash to the id of
        // the element you wish to scroll to.
        $location.hash('pendingrequests');

        // call $anchorScroll()
        $anchorScroll();
    };

Can you include your controller in the code example? The problem may lie in there, as this code example is the exact same as the [documentation](https://docs.angularjs.org/api/ng/service/$anchorScroll) (where the demo is working for me) — Blaise, Apr 15 '15 at 09:48
It's pretty lengthy... And I just noticed that the Angular docs page had the same issue: https://docs.angularjs.org/api/ng/service/$anchorScroll#! — Kode, Apr 15 '15 at 13:13
In that case, you could file a bug at https://github.com/angular/angular.js/issues — Blaise, Apr 16 '15 at 09:05

score 9 · Accepted Answer · edited May 23 '17 at 10:33

I was able to solve it using one of the answers here: How to handle anchor hash linking in AngularJS

by creating the following function:

$scope.scrollTo = function(id) {
var old = $location.hash();
$location.hash(id);
$anchorScroll();
//reset to old to keep any additional routing logic from kicking in
$location.hash(old);
};

I would call this as follows:

<a href="" data-ng-click="scrollTo('pendingrequests')">Yipee</a>

<div id="pendingrequests"></div>

score 2 · Answer 2 · answered Sep 15 '17 at 12:52

Latest Update

From AngularJS 1.4.0 $anchorScroll allows you to directly pass the id as a parameter without the need to update the URL with the hash.

During click

<div data-ng-click="gotoRequests(pendingrequests)"> </div>

In Controller

$scope.gotoRequests = function(divId) {  $anchorScroll(divId); }

score 0 · Answer 3 · answered Oct 05 '18 at 04:58

I also had the same issue with angular 1 and I solved it using $timeout. Here is an example of how I did it

angular.module('app').controller('MyTestController', ['$scope', '$location', '$anchorScroll', '$timeout', function($scope, $location, $anchorScroll, $timeout) {
function scrollToElement (element, offset){
    $timeout(function() {
      $anchorScroll.yOffset = offset; // add extra pixels to scroll initially
      var old = $location.hash();
      $location.hash(element);
      $anchorScroll();
      $location.hash(old);
    });
  }
scrollToElement('element ID', 100);
}]);

score 0 · Answer 4 · edited Mar 06 '19 at 11:08

0

You need to add $timer for 300 like:

this.gotoBottom = function(scrollId) { 
    $timeout(function() { 
        $location.hash(scrollId); $anchorScroll(scrollId); 
    }, 300);
}

edited Mar 06 '19 at 11:08

ttulka

10,309
7
41
52

answered Mar 06 '19 at 10:07

shubham babhulkar

1

AnchorScroll only works after second click

4 Answers4

Linked