AngularJS $anchorScroll Service
Last Updated :
30 Jul, 2024
The $anchorScroll service in AngularJS is a built-in service that allows you to automatically scroll to a specific element on the page when the user clicks a link. This can be useful if you have a page with a lot of content and you want to provide a way for the user to easily jump to a specific section.
To use the $anchorScroll service, you will need to include the ngAnimate module as a dependency in your AngularJS application. Then, you can inject the $anchorScroll service into your controller, directive, or service and call the $anchorScroll() function to scroll to a specific element. The $anchorScroll service in AngularJS has a single function that you can use to scroll to a specific element on the page.
Syntax:
$anchorScroll([hash]);
Parameters: This function accepts the following optional parameters:
- hash: It is an optional parameter that specifies the element that is to be scrolled to. The value of the $location.hash() will be used in case of omission.
- offset: An integer value that specifies a custom offset to use when scrolling. This can be used to adjust the position of the element after it has been scrolled into view. The default value is 0.
- easing: A string value that specifies the easing function to use when scrolling. This can be used to control the speed and smoothness of the scroll animation. The default value is “swing”.
Other possible values for the easing parameter include:
- “linear”: A simple linear easing function that maintains a constant speed throughout the animation.
- “easeInQuad”: An easing function that starts slowly and accelerates as it progresses.
- “easeOutQuad”: An easing function that starts quickly and decelerates as it progresses.
- “easeInOutQuad”: An easing function that starts and ends slowly, with a faster animation in the middle. You can also specify a custom easing function by providing a function that returns a value between 0 and 1 based on the progress of the animation.
Syntax :
app.controller('MyCtrl', ['$anchorScroll', '$location', '$scope',
function($anchorScroll, $location, $scope) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash(location);
// call $anchorScroll()
$anchorScroll(offset,easing);
};
}]);Approach 1: Here, each box has a link to “Box 1”, “Box 2” and “Bottom Box” respectively. The last box is also given an id “bottom” which is used by AngularJS to scroll to that location when the “Go to bottom box of page” button is clicked. Another button “Go to Header” is given which when clicked takes the user to the top of the page where the header is present.
Example 1: This example uses the $anchorScroll service to navigate to the top and bottom boxes.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: green;
}
a {
text-decoration: none;
color: white;
}
.box {
width: 300px;
height: 200px;
border: 1px solid gray;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
border-radius: 4px;
margin-top: 20px;
margin-bottom: 20px;
}
#btn {
text-decoration: none;
border: 1px solid gray;
width: 100px;
height: 30px;
padding: 10px;
border-radius: 5px;
background-color: black;
color: white;
margin-bottom: 20px;
}
#btn1 {
text-decoration: none;
border: 1px solid gray;
width: 100px;
height: 30px;
padding: 10px;
border-radius: 5px;
background-color: black;
color: white;
margin-top: 20px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$anchorScroll', '$location', '$scope',
function ($anchorScroll, $location, $scope) {
$scope.gotoBottom = function () {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
$scope.gotoTop = function () {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('top');
// call $anchorScroll()
$anchorScroll();
};
}
]);
</script>
</head>
<center>
<body ng-controller="MyCtrl">
<a href="" id="top">
<h1> GeeksforGeeks</h1>
</a>
<a href="" id="btn" ng-click="gotoBottom()">
Go to bottom box of page
</a>
<div>
<div class="box">
<a id="top" href="">Box 1</a>
</div>
<div class="box">
<a href="">Box 2</a>
</div>
<div class="box">
<a href="" id="bottom">Bottom Box</a>
</div>
<a href="" id="btn1" ng-click="gotoTop()">
Go to Header
</a>
</div>
</body>
</center>
</html>
Output:
Approach 2: Here, each link calls the scrollTo() function defined in the controller and passes the id of the section to scroll to as an argument. When a link is clicked, the $anchorScroll service is used to scroll to the element on the page with the corresponding id, highlighting the section in black color.
Example 2: In this example, a navigation bar with links to different sections are added.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: green;
}
a {
text-decoration: none;
color: white;
}
.box {
width: 300px;
height: 200px;
border: 1px solid gray;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
border-radius: 4px;
margin-top: 20px;
margin-bottom: 20px;
}
.target-section {
background-color: black;
margin-top: 50px;
padding: 20px;
color: white;
}
nav {
background-color: green;
color: white;
height: 30px;
padding-top: 5px;
text-align: center;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$anchorScroll', '$location', '$scope',
function ($anchorScroll, $location, $scope) {
$scope.scrollTo = function (section) {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash(section);
// call $anchorScroll()
$anchorScroll();
};
}
]);
</script>
</head>
<body ng-controller="MyCtrl">
<center>
<h1> GeeksForGeeks</h1>
<h3>Example of $anchorScroll service in AngularJS</h3>
</center>
<nav>
<a href=""
ng-click="scrollTo('section1')">
Section 1
</a>
<a href=""
ng-click="scrollTo('section2')">
Section 2
</a>
<a href=""
ng-click="scrollTo('section3')">
Section 3
</a>
</nav>
<div class="target-section"
id="section1">
<h2>Section 1</h2>
<p>
The $anchorScroll service in AngularJS is a built-in
service that allows you to automatically scroll to a
specific element on the page when the user clicks a
link. This can be useful if you have a page with a lot
of content and you want to provide a way for the user
to easily jump to a specific section.
</p>
</div>
<div class="target-section"
id="section2">
<h2>Section 2</h2>
<p>
The $anchorScroll service in AngularJS is a built-in
service that allows you to automatically scroll to a
specific element on the page when the user clicks a
link. This can be useful if you have a page with a lot
of content and you want to provide a way for the user
to easily jump to a specific section.
</p>
</div>
<div class="target-section"
id="section3">
<h2>Section 3</h2>
<p>
The $anchorScroll service in AngularJS is a built-in
service that allows you to automatically scroll to a
specific element on the page when the user clicks a
link. This can be useful if you have a page with a lot
of content and you want to provide a way for the user
to easily jump to a specific section.
</p>
</div>
</body>
</html>
Output:
Similar Reads
AngularJS Services
The Services is a function or an object that avails or limit to the application in AngularJS, ie., it is used to create variables/data that can be shared and can be used outside the component in which it is defined. Service facilitates built-in service or can make our own service. The Service can on
4 min read
Angular.js $log Service
The $log service in Angular.js is simply used for logging purposes on the browser console. It is used for the debugging and troubleshooting of the error in the code. It has various implementations like a log, warn, info, error, and debugging, and all the names suggest. It is used for logging, warnin
5 min read
AngularJS $parse Service
The $parse service in AngularJS is a function that takes an expression string and returns a function that can be used to parse and evaluate the expression. The expression string can contain variables, operators, and function calls. To use the $parse service, you first need to inject it into your Ang
3 min read
AngularJS $window Service
The $window service refers to the browser window object. It is globally available in JavaScript, so it causes testability problems. In AngularJS, it is not globally available. It includes various methods like alert box, prompt box, confirms box, etc. Now let us see the actual implementation of the $
2 min read
AngularJS $timeout Service
Web development is a rapidly growing field. A technology introduced today is bound to get outdated within a few months. Earlier, the websites used to be static, with little to no animation or CSS. However, the introduction of vanilla JavaScript completely revolutionized the way websites used to look
3 min read
AngularJS $location Service
The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read
AngularJS $document Service
In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $document serv
3 min read
AngularJS $interval Service
The $interval service in AngularJS is a function that allows you to execute a function repeatedly at a specified interval. It is similar to the setInterval function in JavaScript, but it is designed to work seamlessly with the AngularJS framework. To use the $interval service, it is first needed to
4 min read
AngularJS $animateCSS Service
The $animateCss service in AngularJS allows developers to easily animate the addition or removal of CSS classes on an element. This feature can be useful for creating visually appealing transitions and adding polish to the user interface. To use the $animateCss service, the ngAnimate module must be
4 min read
Angular PrimeNG Accordion Disabled
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Accordion Disabled in Angular PrimeNG, along with unders
3 min read