The anchorScroll service in AngularJS allows us to jump to the specific HTML element in the web page. When this gets called then it adds [#element-id] on the URL which you can remove with few more line of code.
It has the dependency on $location service for hash the id on the URL and the anchorScroll reads the hashed string and looks for the given id in the web page and jump to it.
Contents
1. HTML
Create two buttons – one at the top and another at the bottom. Attach ng-click directive on the buttons and define navElement() function which takes the element id as a parameter.
Completed Code
<body ng-app='myapp'>
<div ng-controller='contentCtrl'>
<button ng-click='navElement("bottom")' id='top'>Take to bottom</button>
<!-- Content (start) -->
<h1>I'm doing mental jumping jacks.</h1>
<p>Hello, Dexter Morgan. You all right, Dexter? I'm really more an apartment person. Tell him time is of the essence. Finding a needle in a haystack isn't hard when every straw is computerized.</p>
<p>I'm not the monster he wants me to be. So I'm neither man nor beast. I'm something new entirely. With my own set of rules. I'm Dexter. <strong> Boo.</strong> <em> I'm generally confused most of the time.</em> Keep your mind limber.</p>
<h2>Cops, another community I'm not part of.</h2>
<p>I'm real proud of you for coming, bro. I know you hate funerals. You're a killer. I catch killers. Tonight's the night. And it's going to happen again and again. It has to happen. I'm partial to air conditioning.</p>
<ol>
<li>I'm really more an apartment person.</li><li>Only you could make those words cute.</li><li>I'm partial to air conditioning.</li>
</ol>
<h3>I've lived in darkness a long time. Over the years my eyes adjusted until the dark became my world and I could see.</h3>
<p>Makes me a ... scientist. Keep your mind limber. Hello, Dexter Morgan. Only you could make those words cute. Makes me a ... scientist.</p>
<ul>
<li>You're a killer. I catch killers.</li><li>I'm really more an apartment person.</li><li>Under normal circumstances, I'd take that as a compliment.</li>
</ul>
<p>I'm thinking two circus clowns dancing. You? You all right, Dexter? Tell him time is of the essence. I've lived in darkness a long time. Over the years my eyes adjusted until the dark became my world and I could see.</p>
<p>Watching ice melt. This is fun. I think he's got a crush on you, Dex! Makes me a ... scientist. You're a killer. I catch killers. God created pudding, and then he rested. I am not a killer.</p>
<p>I'm going to tell you something that I've never told anyone before. I'm really more an apartment person. Tell him time is of the essence. I'm Dexter, and I'm not sure what I am. Rorschach would say you have a hard time relating to others.</p>
<p>You're a killer. I catch killers. I'm a sociopath; there's not much he can do for me. Keep your mind limber. Makes me a ... scientist.</p>
<p>I feel like a jigsaw puzzle missing a piece. And I'm not even sure what the picture should be. I've lived in darkness a long time. Over the years my eyes adjusted until the dark became my world and I could see.</p>
<p>Makes me a ... scientist. I'm real proud of you for coming, bro. I know you hate funerals. I'm generally confused most of the time. I have a dark side, too.</p>
<p>Tonight's the night. And it's going to happen again and again. It has to happen. This man is a knight in shining armor. Hello, Dexter Morgan. I will not kill my sister. I will not kill my sister. I will not kill my sister.</p>
<p>I'm not the monster he wants me to be. So I'm neither man nor beast. I'm something new entirely. With my own set of rules. I'm Dexter. Boo. I've lived in darkness a long time. Over the years my eyes adjusted until the dark became my world and I could see.</p>
<!-- Content (end) -->
<button ng-click='navElement("top")' id='bottom'>Take to top</button>
</div>
</body>
2. Script
In the controller with $scope also pass $location and $anchorScroll. Create a navElement() function that takes element id as parameter.
With $location.hash append element id on the page URL e.g. #bottom. The anchorScroll() read the page URL and scroll to defined hash id.
Completed Code
var app = angular.module('myapp', []);
app.controller('contentCtrl', ['$scope', '$location', '$anchorScroll',
function($scope, $location, $anchorScroll) {
$scope.navElement = function(elementid) {
// set the location.hash
$location.hash(elementid);
$anchorScroll();
};
}
]);
3. Remove Hash(#)
Just add following two lines after calling $anchorScroll() –
// Remove hash
$location.hash('');
$location.replace();
Completed Code
var app = angular.module('myapp', []);
app.controller('contentCtrl', ['$scope', '$location', '$anchorScroll',
function($scope, $location, $anchorScroll) {
$scope.navElement = function(elementid) {
// set the location.hash
$location.hash(elementid);
$anchorScroll();
// Remove hash
$location.hash('');
$location.replace();
};
}
]);
4. Demo
Click on the buttons. Open in a new tab.
5. Conclusion
The $location service is used to append element id at the page URL with the hash() method and with the $anchorScroll() jump to the id.
