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.
<!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=
</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.
<!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=
</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: