Navigate to section inside a page in AngularJs

Question

Is there a way to use in page navigate to a specific defined section in angular without cause the routing service work?

i.e:

the section we want to jump to:

<a name="tips">
    <div>Tips and tricks...</div>
</a>

and somewhere else in the page there is the anchor:

<a href="#tips">jump to tips and tricks</a>

Right now the first thing that comes in my mind is to stop navigation in routing engine at the default route function. check if the requested url is an inner page link and abort the navigation there.

you should look at this question, I think it's the same http://stackoverflow.com/questions/14026537/anchor-links-in-angularjs — sunderls, Jan 09 '14 at 09:37
@sunderls thanks. I tried the ng-href but it fires the ngRoute mechanism etc. I will create a plunk or jsFiddle that will describe the issue later on today. — Erab BO, Jan 09 '14 at 11:50

score 3 · Answer 1 · answered Jan 09 '14 at 11:55

3

I'll need to use $anchorScroll.

http://docs.angularjs.org/api/ng.$anchorScroll

answered Jan 09 '14 at 11:55

William Lepinski

888
1
7
14

score 1 · Answer 2 · answered Apr 05 '17 at 05:14

according to angularjs 1.x the js file:

angular.module('ur-ng-app').run(['$anchorScroll', function ($anchorScroll) {
    $anchorScroll.yOffset = 70; // always scroll by 50 extra pixels
}])
.controller('ur-controller', ['$anchorScroll', '$location', '$scope',
    function ($anchorScroll, $location, $scope) {
        $scope.gotoAnchor = function (x) {
            var newHash = 'anchor' + x;
            var old = $location.hash();
            if ($location.hash() !== newHash) {
                $location.hash('anchor' + x);
                $anchorScroll(newHash);
                $location.hash(old);
            } else {
                $anchorScroll(newHash);
                $location.hash(old);
            }
        };
    }
]);

html file:

<div class="well">
<div class="container" ng-controller="ur-controller">
    <a ng-click="gotoAnchor(1)">Accordion</a>
    <a ng-click="gotoAnchor(2)">Alert</a>
</div>

<div id="anchor1" class="col-md-12 portlets ui-sortable">
    <div class="panel">
        <div ng-include="'sample'"></div>
    </div>
</div>
<div id="anchor2" class="col-md-12 portlets ui-sortable">
    <div class="panel">
        <div ng-include="'sample'"></div>
    </div>
</div>
<div id="anchor3" class="col-md-12 portlets ui-sortable">
    <div class="panel">
        <div ng-include="'sample'"></div>
    </div>
</div>
</div>

Navigate to section inside a page in AngularJs

2 Answers2