Geek Answers Handbook

Using AngularJS $ anchorScroll to jump to the anchor tag of another page

From my AngularJS homepage, I need to scroll the anchor tag on another page. Both of these pages arrive as partial html in the ng-view component based on the URL. When the server starts, the home page loads and from there you need to go to the faq page. I used regular href C #, but this did not point to the correct div on the landing page. Here is what I tried with$anchorScroll

Here is the controller method

	
$scope.scrollToFaq = function(id) {
   $location.path("/faq")
   $location.hash(id);
   $anchorScroll();
}
Run codeHide result

This is how I use it in home.html

<a ng-click="scrollToFaq('HERE')" href="" class="link">Here</a>
Run codeHide result

But this does not work correctly. If I load the faq page directly and then go back and click on the anchor link on the main page, it will work. Can this be done with $$ anchorScroll

+4
3

Angular $.

$scope.scrollToFaq = function(id) {
 $location.path("/faq");
 $timeout(function(){
   $location.hash(id);
   $anchorScroll();
 }, delay);

delay , , . 300 /400 . , $anchorscroll $timeout. , .

. $timeout. , .

+2

, . div . . , .

$scope.scrollToFaq = function(id) {
    $location.path("/faq");
    $(window).on("load", function(){       
       $location.hash(id);
       $anchorScroll();
    });
    };
0

. :) , URL-, , .

HTML:

<a href="" ng-click="goToAnchor('/', 'links')">Links</a>

:

angular.module('exampleApp').controller('NavbarCtrl', function ($scope, $location, $timeout, $anchorScroll) {
      $scope.goToAnchor = function(path, anchor){
          $location.path('/');

          $timeout(function() {
             $anchorScroll(anchor);
          }, 500);
      };
});
0

More articles:


All Articles