Scroll To Page Anchor In An Ionic 1.x App

Posted By Weston Ganger

Apparently its not as easy as regular HTML to scroll to a page anchor with link in Ionic and AngularJS. Here is how to correctly do this in your app:

In your controller add the scrollTo function:

.controller('MyController', function($scope, $location, $ionicScrollDelegate){
  $scope.scrollToAnchorWithinCurrentPage = function(anchor){
    $location.hash(anchor);
    var handle = $ionicScrollDelegate.$getByHandle('content');
    handle.anchorScroll();
  };
})

Note: My preference is to instead, add this function in your $rootScope in yourapp function.

Then heres the HTML to use this:

<pre>
<code class="language-markup">
<ion-content delegate-handle="content">
<a ng-click="scrollTo('location-1')">View location 1</a>

<div id="#location-1"></div>
</ion-content>



Related External Links:

- [Saints At Play - scrolling-to-a-page-anchor-in-ionic-framework](http://www.saintsatplay.com/blog/2015/02/scrolling-to-a-page-anchor-in-ionic-framework#.VvaqNBIrLdS)

Article Topic:Software Development - Javascript

Date:July 05, 2016