SafariとかのWebkit系ブラウザでページ内リンクでのスクロールがするするいかないと悩んでいるあなたへ
いまこの時点で、日本全国に２人くらいはいるでしょうか？悩んでる人。
この記事はあなたのための記事です。
ページ内のリンクをクリックしたとき、JQueryのscrollでスルスルってスムーズにページ内を移動させるやつありますね。
Jqueryのプラグインでも沢山ありますし、こんなコードを使ってもいけますし。
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length && target;
if (target.length) {
var sclpos = 30;
var scldurat = 600;
var targetOffset = target.offset().top - sclpos;
$('html,body').animate({scrollTop: targetOffset}, {duration: scldurat, easing: 'easeOutExpo'});
return false;
}
}
});ところがこのコード、SafariとかのWebkit系のブラウザでうまく動作しないことがあります。
原因は、JavaScriptではなくスタイルシートのこれ！
html, body{
overflow:hidden;
}
overflow:auto でもダメっぽい。
