How to redirect to anchor in angularjs

Question

There is an anchor at the top of the page:

<a href="#top">Logo goes here</a>

At the bottom of the page, there is a contact form. I want to jump to the top of the page, to the anchor after completing the contact form.

$location.path("#top")

did not help.

How to do this?

Jesper We · Answer 1 · 2015-01-23T10:23:19.753

1

Do it the angular way. Use $anchorScroll The example in the manual page is exactly what you want, except it scrolls to the bottom instead of the top...

edited Jan 23 '15 at 10:23

answered Jan 23 '15 at 10:01

Jesper We

5,977
2
26
40

2

It would be nice to give an example or else its not more that a link only answer – Satpal Jan 23 '15 at 10:04

score 0 · Answer 2 · answered Jan 28 '15 at 14:28

$anchorScroll is the way to do it. Here's an example of its use:

var myApp = angular.module('myApp', []);

myApp.controller('myController', function ($scope, $location, $anchorScroll) {
    $scope.gotoBottom = function(myTarget) { // this is the function to call with ng-click
      $location.hash(myTarget);  // set the target
      $anchorScroll();  // scroll to the target that has been set
    };
}]);

Then you would have HTML like the following:

<div ng-controller="myController">
  <a ng-click="gotoBottom('goHere')">Scroll to my target location</a>
  <p>Some random stuff</p>
  <p>Some random stuff</p>
  <p>Some random stuff</p>
  <a id="goHere">This is where you scroll to</a>
</div>

How to redirect to anchor in angularjs

2 Answers2