iPhoneやAndroidでjQuery使ってスムーススクロールしようとしてもなんかズレる！ファッキン！となる事が多いっぽい。

理由：zoomで変動する色々な分を考慮してない
対策：こんな感じかな？（ソース超汚いけど）

$('a[href^=#]').click(function() {
var t = $(this).attr('href');
var tt = ($(t).offset()||$('html').offset()).top;
var ht = $('html').offset().top;
var wy = window.scrollY;
var zt = (tt - ht - wy);
var zm = ($('html').css('zoom')||$('body').css('zoom')||1);
var rt = zt * zm;
$('html,body').stop().animate({scrollTop : rt}, 500, 'swing');
return false;
});


「ページが一番上にある場合の$(‘#hoge’).offset().top × $(‘html’).css(‘zoom’)」になればいいんだけど、
ブラウザでズーム（Ctrl+ホイールのアレ）とかすると、、zoom倍率分だけ$(‘html’).offset().topがマイナス方向にずれていくのでそのぶんを補正すればいいっぽい。

Categorised as:雑記