Default iOS tap on top behavior

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

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.

1 Like

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);
                    });

                }
            }
        })

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?

@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.

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.

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

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

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

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.

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.

1 Like

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

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.

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

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

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.

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

1 Like