<!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
>