scroll-behavior: smooth;がiOS safariで動作しない場合

前提・実現したいこと

基本的なHTML、CSSを使ってPC、スマホに対応したページを作成しています。
大凡のことは検索し、"scroll-behavior: smooth;"をつかうことで
アンカーリンクの滑らかなスクロールが実現できることがわかり、
PC(Chrome)での動作は確認できたのですが、
iOS、safariで同様のページを開くと動作しないことが確認できました。
この場合、どのように記述すれば動作するでしょう？
また、どのような要素から動作していないと考えられるでしょうか？
教えていただけると幸いです。よろしくお願い致します。

CSS

html{
scroll-behavior: smooth;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 959px) {

  html {
scroll-behavior: smooth;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
  }

img {
display: block;
width: 100%;
height: auto;
}

area{
scroll-behavior: smooth;
}

}
@media screen and (max-width: 480px) {

  html {
scroll-behavior: smooth;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
  }

img {
display: block;
width: 100%;
height: auto;
}

area{
scroll-behavior: smooth;
}

}

試したこと

PC版chrome、及び開発モードによるシュミレーションでは動作を確認済み

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ポリフィルを使ってはいかがでしょうか。

今どきのスムーズスクロール(2019年版) - to-R Media

投稿2020/12/01 08:25

Lhankor_Mhy

総合スコア36946

ベストアンサー

iOS13になってからJavascriptの ‘a[href^=”#”]’ みたいな文字列部分が原因らしいです。
下記コードで動きました。

js
1$(document).ready(function() {
2    $('a').click(function(){ 
3        var target= $(this).attr("href");
4        var webkit = !document.uniqueID && !window.opera && !window.globalStorage && window.localStorage;
5        var ua = navigator.userAgent;
6        var scrollTag;
7        if( ua.indexOf('OPR') !== -1 || ua.indexOf('Edge') !== -1 ) {
8          scrollTag = 'body';
9        } else {
10          scrollTag = ( !window.chrome && 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
11        }
12        $(scrollTag).animate({scrollTop: $(target).offset().top},400);
13        return false;
14    });
15});
16
17以下、参考にさせてもらったサイトです。
18https://commono.co.jp/2017/11/22/how_to_adopt_smooth-scroll_to_full_path_url/
19https://coru2.com/blog/archives/671