Default iOS tap on top behavior


#1

Hi, how can i simulate a default iOS behavior tap on status bar to scroll to top content?


#2

I’m also interested in implementing this in my app. While I personally haven’t had a change to try it, some ways to reset the content scroll seem to have been suggested in this issue - specifically $ionicScrollDelegate. You can probably catch the tap events using [ionic’s gestures] (http://ionicframework.com/docs/angularjs/utils/gestures/) or [Hammer.js] (http://eightmedia.github.io/hammer.js/) (suggested on the gestures page), and reset content scroll once the event triggers.


#3

Tks to reply @abekim !
See my code below, i’m doing some thing wrong? My Status bar is working great, but the tap doesn’t!

.directive('fadebar', function($timeout, $ionicGesture) {
            return {
                restrict: 'E',
                template: '<div class="fade-bar"></div>',
                replace: true,
                link: function($scope, $element, $attr) {

                    // Run in the next scope digest
                    // CODE TO STATUS BAR TRANSLU

                    var tapFn = function(e) {
                        alert('TEST');
                    };
                    var tapGesture = $ionicGesture.on('tap', tapFn, $element[0]);
                    $scope.$on('$destroy', function() {
                        $ionicGesture.off(tapGesture, 'tap', tapFn);
                    });

                }
            }
        })

#4

Ionic already has the functionality where a tap on the top of the nav-bar causes the view to scroll to the top. This works for me in iOS ( 6 & 7) and in Chrome. Now admittedly, you have to tap on nav-bar rather than the status bar, but it seems to work fine.

Here’s a short demo:

Is it not working for you? What version of Ionic are you using?


#5

@Calendee I’m getting this to work in Chorme, but it seems buggy on my phone (iPhone 5, iOS 7.06). It did work a few version back, but I’ve been using the nightly builds for a while now that I cannot remember which version I started having issues.


#6

Thanks for the info. I’m mainly using 0.9.25 right now on my app; so, I haven’t ventured far with any other version. I’ll put together a simple app to test between 0.9.25, 0.9.26, and nightlies.


#7

@Calendee, it’s not working for me.
I use the last version (0.9.26)! I’ll test in older versions too.


#8

Did you try in the browser (Chrome) or on an actual device?


#9

At the time only in my device. iPhone 5 with iOS 7.0.6.


#10

So I did get it to work (had to switch to an iPad for some reason). I had to keep tapping on the header and moving my finger around though, so this can be problematic.


#11

Don’t working in 0.9.25, 0.9.26 and 0.10.0-alpha-1051 (2014-03-06)!
Some times work, but i need to tap many times such as @mhartington said! I think its a bug!
My app have a StatusBar plugin and a fadebar directive.


#12

I got the fade bar too…could be the issue. I’ll test with an android device and report back in bit


#13

So I just tested this on an android device and I’m starting to think that it is the fade bar directive. To make sure it only appeared on iOS7, I added the platform specific class to it as well.

.platform-ios7 .fade-bar {
	height: 20px;
	width: 100%;
	position: fixed;
	z-index: 9999;
	opacity: 0;
	background-color: #000;
	position: absolute;
	top: 0px;
}

So the fade bar isn’t even there on anything device that isn’t an iOS7 device. Tried taking the fade bar out from my iOS project, and it worked like a charm.

So the issue seems to be that when you tap the header, it thinks you’re tapping the fade bar and no the header it self.


#14

I’m using an ion-nav-bar and no fade directive and it doesn’t work for me - it looks like it’s broken in tabs - you can see the broken behavior in the Ionic Codepen demo too: http://codepen.io/ionic/pen/KbrzJ


#15

It’s working when I go to the codepen, in both safari and chrome


#16

I can get it to work by clicking a bunch of times (triple taps seem to work?), but it’s really flaky, and no matter how furiously I tap it doesn’t work on any iOS or Android device I’ve tried.


#17

Sorry it took me so long to get back to this. I’ve setup on device and confirm that the tapScrollToTop is very intermittent.

I’ve opened Issue # 750 : https://github.com/driftyco/ionic/issues/750