带有iScroll.js的iOS动画锚滚动方法

Question

Im using iScoll.js to help with scrolling animations on iOS. Basically it uses hardware accelerated CSS properties to move the content, not traditional scrolling.

iScoll is working well but I'm also trying to implement a smooth scrolling anchor solution.

It works fine on desktop but the problem is that I can't workout how to retrieve the correct offset value to pass to the iScoll Instance. I feel like im super close to a solution:

var ua = navigator.userAgent,
    isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);

if (isMobileWebkit) {
      iScrollInstance = new iScroll('wrapper');
}


$('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                   if (isMobileWebkit) {
                       iScrollInstance.refresh();
/* issue here with "target.position.top" = "undefined" */
                       iScrollInstance.scrollTo(0, target.position.top, 1000);
                   }else{
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                   }
                return false;
            }
        }
    });

full demo here http://jsfiddle.net/Wccev/3/

Answer 1

Not sure why but it seems iScroll.js didn't like jQuery in the scrollTo function. So setting the variable ahead of time seemed to help. I also had to work out the correct offset because of the way iScroll moves a div not the screen.

If anyone needs it, this jQuery should help with smooth scrolling anchors on IOs devices provided you setup iScroll correctly:

var ua = navigator.userAgent,
    isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);

if (isMobileWebkit) {
    $('html').addClass('mobile');
}   

$('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                   if (isMobileWebkit) {
                        scrollOffset = $('#scroller').position().top;
                        targetOffset = target.offset().top;
                        iScrollInstance.refresh();
                        iScrollInstance.scrollTo(0, -(targetOffset-scrollOffset), 1000);
                   }else{
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                   }
                return false;
            }
        }
    });