-webkit-overflow-scrolling:touch and 'Tap status bar to scroll to top'

Question 1

If you put -webkit-overflow-scrolling:touch on any element other than document.body, it will break the default tap status bar to scroll to top behaviour.

There is a tiny script on GitHub, that works as a replacement for the missing scroll to top of iOS overflow scrolling. You can put it on your apps header to achieve nearly the same result.

Question 2

From my experience, it indeed affects it. I don't know of a way to have both features working at the same time, at least as of iOS 6.1.

I also have a quote from the jQuery Mobile docs that backs this up:

The -webkit-overflow-scrolling:touch property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.

It is really unfortunate that Apple has it set up like this, as I too would love to use this feature, but the scroll-to-top ability is more important to me.

Question 3

Your fiddle doesn’t break the “tap status bar to scroll to top” behaviour, because you have applied -webkit-overflow-scrolling: touch; to the body element. If you apply it to any element inside of body the behaviour breaks.

Question 4

There's a way around this – http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar/

Matteo Spinelli, the creator of iScroll, reveals in a tweet that it's actually not hard at all to achieve this. When you tap the status bar, the scroll event on the window object gets triggered. Using an event listener you could then easily call the scrollTo function to scroll to the top of the list.
window.addEventListener('scroll', function(){
  yourscrollobject.scrollTo(0,0,duration);
}, false);

Question 5

As most answers here have noted, putting -webkit-overflow-scrolling: touch on any element other than document.body causes problems. If you're using a fixed header and don't want to add any dependencies, this should do the trick for anyone using JQuery:

$('.fixed-header').on('click',function(e){
    var $scrollingElement = $('.scrolling-element');

    $scrollingElement.css('overflow','hidden');
    $scrollingElement.animate({ scrollTop: 0 }, "fast", function() {
        $scrollingElement.css('overflow','auto');
    });
});

The purpose of toggling the overflow property is for devices using momentum scrolling. This immediately stops any momentum and does the scroll animation. I made the scrolling element a variable just so that we're not unnecessarily querying the DOM several times. Hope this helps someone out down the road. If you'd rather be hands off about it, the github project @patrick linked to looks like another great solution.