Ionic

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){
    $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:


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


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