How To Scroll To Page Anchor In An Ionic 1.x App

Posted by Weston Ganger on July 05, 2016

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){
    var handle = $ionicScrollDelegate.$getByHandle('content');

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

Then heres the HTML to use this:

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

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

Related External Links:

Posted in Ionic and Tagged with ionic 

Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts