質問: target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); ``` その次に ``` html{scroll-behavior: smooth} ``` と記述したところ、Chromeでは上手く動作しましたがその他ブラウザ(iPhone safari等)では変化なしでした。 (ブラウザがサポートしていないからでしょうね) ### 解決案2 スクロール後の動作を追加する 移動後すぐにリンクが開かないよう、スクロール後にフェードイン等の動作をつけることも解決策かと思います。 一通り検索して調べてみましたが、フェードインの場合CSSのopacityを利用して動作させるようなので、リンクは開けてしまうのではないかと思います。 まだ実装していないので憶測で上記書いておりますが、この観点でもアドバイス等ございましたら、ご教示頂けないでしょうか。 ### 最後に 解決案1・解決案2どちらでも構いませんので、対処法をご教示頂けますとありがたく存じます。 (それ以外の解決策もございましたら、是非教えて頂けるとありがたいです) 何卒、宜しくお願い致します。
回答: そもそもサンプルページで * jqueryを2度読み込んでいる * 404の外部ファイルが複数ある * scriptの閉じタグに誤りがある など色々と修正して欲しい箇所はありますが、 要はpathをクリックした際の挙動を捉えて アンカーリンクまで飛ばせば良いので、 スムーススクロール自体の処理としては ``` $('path').click(function(){ var speed = 500; var target= $(this).attr("id"); var target= target.replace("map_", 'sec'); var position = $('div[id="' + target + '"]').offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); ``` で良いかと思います。 スクリプトの記述の誤りについては 閉じタグの対応具合をよく見て対処してみてください。