How to set the scroll of a DIV to the top in an IONIC app

[Andy Parker]

Hi,

I have a div that contains lists.

The div enables the user to scroll up and down the list, and when a button is pressed I want the scroll to go to the top so the top of the list is displayed.

I've found the some code to do this, but unsure how it fits into the Appery codebase and am looking for guidance please.

The div is called camlist_div, I presume I need to set a controller for the div (as this is mentioned in the code below) but I have no idea where to start.

code
Controller Code
.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

Code: Select all

$scope.scrollTop = function() { 
   $ionicScrollDelegate.scrollTop(); 
}; 

})

/code

[Serhii Kulibaba]

Hello Andy,

Please look at this example how to use scrollTop in AngularJS application: https://docs.angularjs.org/api/ng/ser...

[Andy Parker]

thank you, I guess the issue I'm having is more - how does the Appery system interface to these functions?

I have the code:
code
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function($anchorScroll, $location, $scope) {
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
// set the $location.hash to 'newHash' and
// $anchorScroll will automatically scroll to it
$location.hash('anchor' + x);
} else {
// call $anchorScroll() explicitly,
// since $location.hash hasn't changed
$anchorScroll();
}
};
}
]);

/code

but this is for systems using HTML outside of the appery scope where components are added in HTML. Here we are adding using a drag/drop of the DIV.
I need to know how to link the function to the DIV, where the $anchorscroll, $location and $scope parameters are passed from?

[Serhii Kulibaba]

Unfortunately this is something outside the scope of standard Appery.io platform support. You may consider purchasing Advisory Pack to get more in-depth help on this question. Here is more information about Advisory Pack (http://appery.io/services/#Advisory_Pack).

The simplier solution is: to add a 3rd-part AngularJS module, e.g.: https://github.com/oblador/angular-sc...

[Andy Parker]

understood, thanks.
Maybe a tutorial would be good just to show how Appery components link back to JS code in IONIC, this would help members use code shown on other sites that is written when components are added in HTML rather than within Appery.