Post
Ask Question

AnchorScroll Service In AngularJS

Overview

In this article, we will discuss Anchor Scroll Service in AngularJS. $anchorscroll Service is used to jump to a specified element in a page. Let's see with an example.

For more articles on Angular JS, refer to

Introduction

In the overview section, $anchorscroll Service is used to jump to a specified element in a page .

In this example, I had written some data on Angular JS and had two buttons. Go to bottom and go to top. My HTML page will look like:

code

As you can see from the screenshot, shown above, I added some of the Angular JS content from Wiki. Now, I had taken two buttons; bottom and top. When you click bottom, it should go to bottom and when you scroll down, it should go to top, as well. Thus, our page will look like:

output

The Page should go to bottom and,

output

Here, the page should go to top.

Now, in HTML tag, add ng-app directive and write the demo. In our model, we will write a line as:  
  1. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="demo">  
  2. var demo=angular.module("demo",[]);  
Now, let's create a controller, called democontroller.
  1. var demo = angular.module("demo", [])  
  2. .controller("demoController", function () {  
  3.   
  4.   
  5. });  
Now, we will pass the three parameters to this function as $scope, $location and $anchorScroll.
  1. var demo = angular.module("demo", []).controller("demoController", function($scope, $location, $anchorScroll)   
  2. {  
  3.     $scope.scrollTo = function() {}  
  4. });  
Now, scroll to is attached to $scope in order to scroll on a page . We will pass the ID's of the two buttons i.e our top button and bottom buttons respectively.
  1. $scope.scrollTo = function (scrollLocation)  
Here, you can give any meaningful names to it. Here, I had used scrollLocation. 

Now, the scrolllocation i.e $location has an hash function. When the respective ID's are clicked, # symbol will be appended as:

output
 
Thus, our function is:
  1. $location.hash(scrollLocation);  
We have an anchor scroll method. The anchor scroll method is going to read the URL and its respective ID's like top and bottom:
  1. $anchorScroll();  
Thus, our final model code is:
  1. var demo = angular.module("demo", []).controller("demoController", function($scope, $location, $anchorScroll)   
  2. {  
  3.     $scope.scrollTo = function(scrollLocation)   
  4.     {  
  5.         $location.hash(scrollLocation);  
  6.         $anchorScroll();  
  7.     }  
  8. });  
Now, just implement the controller name to the body section as:
  1. <body ng-controller="demoController">  
Now, let's pass an ID on the buttons and also ng-click, where we want to scroll the function as:
  1. <button id="Top" ng-click="scrollTo('bottom')">Bottom</button>  
As we want to scroll to the bottom, the ID is taken t the top, similarly tothe bottom as:
  1. <button id="bottom" ng-click="scrollTo('Top')">Top</button>  
Thus, when I click bottom button, the scroll has appeared down as:

output

Now, look at the URL at the top.

output

It's because of the hash function, when you click top button, the scroll will move upwards and note the URL and the ID has changed to TOP

output

If you want to add space to the top of the button, we will add in our model as : $anchorScroll.yOffset=20;

Thus, when you reload the page, you will get the space between the page and button.

Thus $anchorservice is used to jump to the specific element of a page.  
  • $location service hash method appends the hash fragments to the URL .
  • $anchorscroll() method reads the hash fragments in URL and jumps to the specific elements.
  • Yofset is used to add the space to the page.

Conclusion: Thus, it was about AnchorScroll in AngularJS. Hope, this article was helpful.


Similar Articles