Q&A
すみません、スムーススクロールの実装に夢中になっていたのですが、この回答も大変参考になりました。
（根本として、そのような問題があることすら知りませんでした）
今後何かの際に活用させて頂くかもしれません。
何卒、宜しくお願い致します。
全くの初心者ですが、以下内容について質問させて頂ければと思います。
現時点取り組んでいること
サンプルHPのように、日本地図をクリック（もしくはタップ）すると、ページ内の該当場所に移動するページを作成しております。
日本地図は、このプラグインを使用し作成しております。
発生した問題
ページ内リンク自体は、うまくいきました。
クリックすると、指定した箇所に無事飛びます。
ただし、これはスマホに顕著なのですが、タップして移動した先にリンクがあると、そのままそのリンクを開いてしまうという不具合が発生します。
（意味分かるでしょうか・・・）
解決策として、大きく以下２つを考えております。
解決案１ スムーススクロールを設定する
第一候補として、スムーススクロールの実装を考えております。
（個人的には、できるだけこの動きを実装させたいと考えております。スクロールしたことが分かりやすいですし）
ネット検索して以下コードを記載してみたものの、私のHPではaタグではなくプラグインを使用しているため（案の定）上手くいきませんでした。
js
1$(function(){ 2 $('a[href^="#"]').click(function(){ 3 var speed = 500; 4 var href= $(this).attr("href"); 5 var target = $(href == "#" || href == "" ? 'html' : href); 6 var position = target.offset().top; 7 $("html, body").animate({scrollTop:position}, speed, "swing"); 8 return false; 9 }); 10});
その次に
css
1html{scroll-behavior: smooth}
と記述したところ、Chromeでは上手く動作しましたがその他ブラウザ（iPhone safari等）では変化なしでした。
（ブラウザがサポートしていないからでしょうね）
解決案２ スクロール後の動作を追加する
移動後すぐにリンクが開かないよう、スクロール後にフェードイン等の動作をつけることも解決策かと思います。
一通り検索して調べてみましたが、フェードインの場合CSSのopacityを利用して動作させるようなので、リンクは開けてしまうのではないかと思います。
まだ実装していないので憶測で上記書いておりますが、この観点でもアドバイス等ございましたら、ご教示頂けないでしょうか。
最後に
解決案１・解決案２どちらでも構いませんので、対処法をご教示頂けますとありがたく存じます。
（それ以外の解決策もございましたら、是非教えて頂けるとありがたいです）
何卒、宜しくお願い致します。
回答3件
0
そもそもサンプルページで
- jqueryを２度読み込んでいる
- 404の外部ファイルが複数ある
- scriptの閉じタグに誤りがある
など色々と修正して欲しい箇所はありますが、
要はpathをクリックした際の挙動を捉えて
アンカーリンクまで飛ばせば良いので、
スムーススクロール自体の処理としては
JavaScript
1$('path').click(function(){ 2 var speed = 500; 3 var target= $(this).attr("id"); 4 var target= target.replace("map_", 'sec'); 5 var position = $('div[id="' + target + '"]').offset().top; 6 $("html, body").animate({scrollTop:position}, speed, "swing"); 7 return false; 8});
で良いかと思います。
スクリプトの記述の誤りについては
閉じタグの対応具合をよく見て対処してみてください。
投稿2018/04/05 04:19
総合スコア483
0
根本原因についての憶測なのですが、SPで固有で発生する「300ms delay問題」かもしれないなと推測しました。
clickが遅れて発動するので、スクロール後に同位置にタップイベントが走ってしまうという。
これが原因であれば、click時のスクロールをtimeoutなどで300ms遅らせればクリアするのではないかと思います。
（スムーススクロールができないのはそれはそれで気になるのですが...。）
もしくは、この300ms delay自体を無くしてしまっても良いかもしれません。
こちらのサイトが参考になります。
副作用がありますので、注意してください。なぜ300ms遅らせているのか？についても記載があります。
投稿2018/04/05 04:09
総合スコア824
0
ベストアンサー
コメントを受けて回答いたします。
まずjQueryのお約束事を覚えておくと良いと思います。
基本的に$(function(){...});とは
jQuery(document).ready(function(){...});の略のことなので
documentを全て読み込んだ後にjQeryを実行してください、という意味です。
ですので書き方としては、
JavaScript
1$(function(){ 2 $('path').click(function(){ 3 var speed = 500; 4 var target= $(this).attr("id"); 5 var target= target.replace("map_", 'sec'); 6 var position = $('div[id="' + target + '"]').offset().top; 7 $("html, body").animate({scrollTop:position}, speed, "swing"); 8 return false; 9 }); 10});
として、jQueryを使用しているということを明示して
documentを読み込んだ後に実行しておく必要があります。
また、上記の実行タイミングのこともあるので
jQueryなどのscriptは書いてある順に上から実行されるので
head内ではなくbodyの閉じタグ直後に書いておくと何かと便利です。
（headに書くと描画速度を低下させる恐れがあります。）
ご確認ください、
投稿2018/04/05 06:42
編集2018/04/05 06:43総合スコア483
大変初歩的な点からご教示頂いたと思っております。
誠にありがとうございます。
頂いたコードを基に再度サンプルHPを修正しましたが、クリック後本来意図していた箇所とは違う場所に移動する等の不具合が生じてしまいます。
挙動的にも、一度下に行ってから上に戻る・・・等の動作が散見されます。
ここまでくると恐らくプラグインとの整合も原因ではないか・・・と思い、プラグイン側も色々といじっている最中ですが、もし修正案等ございましたら、ご連絡頂けないでしょうか。
本当に、度々申し訳ございません。
プラグインとクリックイベントが競合しています。
map-interact.jsの57行目〜と79行目〜あたり、
if(map_config[id]['target'] == 'new_window'){
window.open(map_config[id]['url']);
}else if(map_config[id]['target'] == 'same_window'){
window.location.href=map_config[id]['url'];
}
のことです。
id要素のtarget属性を読み取って処理を変えているようです。
別ページで開いたりスクロールをさせずにアンカーリンクさせたい場合は必要ですが、
今回の要望の限りでは必ずも必要ではありません。
また、今回書いたscriptはあくまで#map_数字をdiv[id="数字"]に変換するものです。
クリックする要素のidとアンカーリンク先の数字を合わせて下さい。
色々と聞いてしまったにも関らず丁寧にご対応頂きまして、
大変ありがとうございました。（サーバーには上げずローカルで確認したのみですが）おかげ様で無事実装できました。
これを機にもう少しJS系勉強することにします・・・
今後とも、何卒宜しくお願い致します。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/05 05:26
2018/04/05 05:48
2018/04/05 06:29