iOS13でページ内リンクのスクロールアニメーションが動かなくなった話

iOS13になってsafariの文字入力が色々と改善され、何かやばい変更ありそうだなーと思ってたら、表題の件が起きました。

iOS13でページ内リンクのスクロールアニメーションが動かない

ページ内リンクをクリックすると、その移動先までアニメーションしてくれるやつですね。そいつが動かないんです。

うんともすんとも、すんっとも言わんのですよ。

iOS12までは確実に動いてたのですが、13にあがった途端動作しなくなりました。

原因何かなーと思ってたのですが、検索して似たような事例がありました。

スムーススクロールがうまく動かない場合の解決方法 | コモノ株式会社

比較的簡単に実装できて、かなり頻繁に目にするスムーススクロール。うまく動かない場合の解決方法をご紹介。

commono.co.jp

こちらのサイトによると、Javascriptの ‘a[href^=”#”]’ みたいな文字列部分が原因とのことでした。

動かなかったスクロール

$(document).ready(function() {
    $('a[href^=#]').click(function(){
        var target= $(this).attr("href");
        var webkit = !document.uniqueID && !window.opera && !window.globalStorage && window.localStorage;
        var ua = navigator.userAgent;
        var scrollTag;
        if( ua.indexOf('OPR') !== -1 || ua.indexOf('Edge') !== -1 ) {
          scrollTag = 'body';
        } else {
          scrollTag = ( !window.chrome && 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
        }
        $(scrollTag).animate({scrollTop: $(target).offset().top},400);
        return false;
    });
});

試しに取得方法を変えてみる

$(document).ready(function() {
    $('a').click(function(){ // ここを修正
        var target= $(this).attr("href");
        var webkit = !document.uniqueID && !window.opera && !window.globalStorage && window.localStorage;
        var ua = navigator.userAgent;
        var scrollTag;
        if( ua.indexOf('OPR') !== -1 || ua.indexOf('Edge') !== -1 ) {
          scrollTag = 'body';
        } else {
          scrollTag = ( !window.chrome && 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
        }
        $(scrollTag).animate({scrollTop: $(target).offset().top},400);
        return false;
    });
});

結論：動作した

なんか上手いこといったけど、このままだとaタグ全てに反応してしまうので、先ほどのサイトを参考に記述を変更してみました。

結果こう変わりました。

$(document).ready(function() {
      $('a').click(function(e){
          var anchor = $(this),
          href = anchor.attr('href'),
          pagename = window.location.href;
          pagename = pagename.replace(/#.*/,'');
          href = href.replace( pagename , '' );
          if( href.search(/^#/) >= 0 ){
            e.preventDefault();
            var speed = 400;
            var target = $(href == "#" || href == "" ? 'html' : href);
            var target= $(this).attr("href");
            var webkit = !document.uniqueID && !window.opera && !window.globalStorage && window.localStorage;
            $("html, body").animate({
                scrollTop: $(target).offset().top},400
            );
            return false;
          }
      });
});

まず、aタグか判定して、hrefに含まれる文字列を後で判定してるって感じに変更。

消費増税とあわせて見直しかけないといけない案件だなぁ。