Introduction
$anchorScroll is the one of the service among the 30 AngularJS built-in services.This blog demonstrates how to use $anchorScroll in AngularJS.
Getting Started
$achonScroll service is used to scroll HTML elements in AngularJS, the scrolling depends on the hash value or $location.hash(). $achonScroll follows rules of HTML specification. This service depends three AngularJS built in services that is $window,$location,$rootScope for scrolling an html element.
This service basically uses in Single Page Application(SPA). Because in Single Page Application(SPA) all the child UI or sub-pages are displaying on one page and whenever any menu clicks, it scrolls respective child view.
Example:-
This following example demonstrates how to use achonScroll service in AngularJS. It displays a list of students in a table in the Student List section and in the bottom(Student details section) of the page, it displays details of a student when double-clicking in a row of table. In the details section, there is a link 'Go-To List', when it is clicked AngularJS application scrolls page to Student list section.For this, this example uses $achonScroll with $location service. The hash function of $location helps to focus the location and $achonScroll scrolls the page to the location, you can use other two services as well. Fore more details please go through this example.
<html ng-app = "myapp">
<title> AngularJS Learning(anchoScroll)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope,$anchorScroll, $location){
$scope.student={ID:0,Name:'',Gender:"Male",Class:"1Std",Section:"A"};
$scope.gotdetails=function(student){
$scope.student=student;
if ($location.hash() !== 'stdetails') {
$location.hash('stdetails');
$anchorScroll();
}
}
$scope.gotolist=function(){
if ($location.hash() !== 'stList') {
$location.hash('stList');
$anchorScroll();
}
}
$scope.students=[
{Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},
{Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},
{Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},
{Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"},
{Name:"Test Student1",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student2",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student3",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student4",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student5",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student6",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student7",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student8",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student9",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student10",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student11",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student12",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student13",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student14",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student15",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student16",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student17",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student18",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student19",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student20",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student21",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student22",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student23",Gender:"Male",Class:"2nd",Section:"B"},
{Name:"Test Student24",Gender:"Male",Class:"3rd",Section:"C"},
{Name:"Test Student25",Gender:"Male",Class:"1Std",Section:"A"},
{Name:"Test Student26",Gender:"Male",Class:"2nd",Section:"B"}];
});
</script>
<body ng-controller="myappcont">
<div id="stList" style="height: 630px;">
<h2>Student List</h2>
<hr/>
<table border="1" style="width:500px">
<thead style="display: block;">
<tr>
<th width="150px">Name</th>
<th width="100px">Gender</th>
<th width="100px">Class</th>
<th width="100px">Section</th>
</tr>
</thead>
<tbody style="height: 480px; display: block; overflow-y: scroll;">
<tr ng-repeat="student in students" ng-dblclick="gotdetails(student)">
<td width="150px">{{student.Name}}</td>
<td width="100px">{{student.Gender}}</td>
<td width="100px">{{student.Class}}</td>
<td width="100px">{{student.Section}}</td>
</tr>
</tbody>
</table>
</div>
<div id="stdetails" style="height: 650px;">
<hr/>
<h2>Student Details</h2>
<a href="" ng-click="gotolist()" >Go To List</a>
<hr/>
<table>
<thead>
<tr>
<th>Property Name</th>
<th>Property Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td width="150px">{{student.Name}}</td>
</tr>
<tr>
<td>Gender</td>
<td width="100px">{{student.Gender}}</td>
</tr>
<tr>
<td>Class</td>
<td width="100px">{{student.Class}}</td>
</tr>
<tr>
<td>Section</td>
<td width="100px">{{student.Section}}</td>
</tr>
</tbody>
</table>
</div>
</BODY>
</HTML>
Summary
Hope this article may helpful to you, happy coding enjo.....y.
Thanks
Tags
AngularJS