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 


Want me to help develop your next project or application?

Contact Us

Specializing in Ruby-on-Rails, Javascript, Multi-Platform Electron Desktop Apps and Hybrid Cordova Mobile Apps.

Recommended Posts