jQueryとmailgoが共用できない

Question

迷惑メール対策にmailgo、
レスポンシブのナビゲーションにbootstrapのNavbarを使って構築しています。
他に読み込んでいるjsもありますが、いくつかテストした結果、下記の組み合わせが動作しないことが分かりました。
他jsはあってもなくてもmailgoの動作に影響ありませんでした。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.js"></script>

jQueryのヴァージョンを変更する、jsファイルの読み込み順番を変える等しましたが全くダメでした。
javascriptにあまり詳しくないので、競合の原因が分かりません。
どなたか詳しい方がおられましたら教えていただけないでしょうか？
よろしくお願いいたします。

Comments

[CHERRY]

問題の生じている内容を再現できるソースコードを記載していただくことは可能でしょうか？

[A8-D]

ここに掲載できるようにソースを編集し確認したら、違うjsファイルが競合していることが分かりました。
スムーススクロールの内容によって競合していたようです。
せっかくお声がけいただけたのに、こちらの些細なミスでお時間を取ってしまい申し訳ありません。

[CHERRY]

解決されたのであれば、ご自身で解決した方法を回答欄に記載して自己解決で質問を終了してください。
https://teratail.com/help#resolve-myself

[A8-D]

ご指摘ありがとうございます。
利用方法を知らず申し訳ありません。
教えていただきありがとうございました。

Answer 1

すみません、自己解決しました。

原因：スムーススクロールのjsとmailgoが競合しました。
解決策：スムーススクロールの内容を変更したらどちらも動作しました。

＜詳細＞
●最初に使っていたスムーススクロールとmailgoの組み合わせ

<script src="https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.js"></script>
<script>
$(function(){
// 全てのアンカータグを対象にする
$('a').click(function(e){
var anchor = $(this),
href = anchor.attr('href'),
pagename = window.location.href;
// 現在のurlのハッシュ以降を削除
pagename = pagename.replace(/#.*/,'');
// リンク先のurlから現在の表示中のurlを削除
href = href.replace( pagename , '' );
if( href.search(/^#/) &gt;= 0 ){
// 整形したリンクがページ内リンクの場合はページ無いスクロールの対象とする
// 通常の遷移処理をキャンセル
e.preventDefault();
var speed = 500;
// 前段階で整形したhrefを使用する
// var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
// ロケーションバーの内容を書き換え
location.hash = href ;
return false;
}
});
});
</script>

上記でmailgoがうまくいきませんでした。

●動作確認できたスムーススクロールとmailgoの組み合わせ

<script src="https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.js"></script>
<script>
document.addEventListener("click", e => {
  const target = e.target;
  // clickした要素がclass属性、js-smooth-scrollを含まない場合は処理を中断
  if (!target.classList.contains("js-smooth-scroll")) return;
  e.preventDefault();
  const targetId = target.hash;
  const targetElement = document.querySelector(targetId);
  // 画面上部から要素までの距離
  const rectTop = targetElement.getBoundingClientRect().top;
  // 現在のスクロール距離
  const offsetTop = window.pageYOffset;
  // スクロール位置に持たせるバッファ
  const buffer = 50;
  const top = rectTop + offsetTop - buffer;

  window.scrollTo({
    top,
    behavior: "smooth"
  });
});
</script>