How to use anchor hash scrolling in Ionic Framework / AngularJS

If you’re reading this, you might be familiar with Ionic Framework and of course, the super-awesome AngularJS framework.

As ui-router comes along with Ionic allowing you to leverage all the power for creating routes using states which you trigger using ui-sref=”state-name” , it does seem difficult at first implementing scroll to particular div(s) using anchor tags in an Ionic app compared to as you would do in usual web pages.

For example, if you have a section with a particular id ‘Contact’, you would do something like this most probably in a usual web app:<a href=”#Contact”>Contact Us</a>
<div id=”Contact”> // some content goes here </div>

But, this won’t work with AngularJS/Ionic. And the reason is that in AngularJS context (used with ui-router), the hash #Contact will be interpreted as a route by ui-router and it will try to load the respective template along with its possible resolves and controllers etc. But we don’t want that, we just want the scroll to jump at the required div/element staying on the same page. Which doesn’t simply happen in the above case.

So the question is:

How to use anchor based hash scrolling in Ionic framework/AngularJS?

Well, it is quite simple, and includes just a few tweaks into your code.

We will use $ionicScrollDelegate from the Ionic Framework library. First of all, if you see the documentation, you’ll notice that it requires the delegate-handle directive to be placed on the <ion-content> tag so you can get the delegate on which the $ionicScrollDelegate has to bind for scrolling control. You’ll get the delegate through $ionicScrollDelegate.$getByHandle in the controller. Let me show an example for our use-case.

First of all, we need to place delegate-handle on our <ion-content> tag and have our anchor tag perform an ng-click:<ion-content delegate-handle="myPageDelegate">
 <a ng-click="scrollTo('Contact')"></a>

 <div id="Contact">
   //some content goes here
 </div>
</ion-content>

Then we need to create a function in our controller. And the controller must inject two services, $location and $ionicScrollDelegatemyApp.controller('MyCtrl', function ($scope,$ionicScrollDelegate,$location) {
 $scope.scrollTo = function(target){
   $location.hash(target);   //set the location hash
   var handle = $ionicScrollDelegate.$getByHandle('myPageDelegate');
   handle.anchorScroll(true);  // 'true' for animation
 };
});

So that’s how it works. You provide a delegate on your ion-content, perform an ng-click on anchor tag click, get the delegate within the click function inside your controller, put the target as hash on url, use anchorScroll function to jump scroll to the target.

Simple as it is :) You have now a working solution for anchor scrolling in AngularJS/Ionic Framework.

I created a small module named ionic-el-scroll that implements the above solution. Do try it out !

Feel free to provide any feedback or to ask any questions. Thanks!

Ahsan Ayaz is CEO and Founder of Owesome, Instructor at KoderLabs University and Senior Software Engineer at Unique Software Development LLC.