[sususu]

【お使いの Snow Monkey のバージョン】 19.1.0
【お使いの Snow Monkey Blocks のバージョン】18.0.1
【お使いの Snow Monkey Editor のバージョン】9.1.1
【お使いのブラウザ】Chrome

 

度々の質問失礼いたします。

 

### 実現したいこと

トップに戻るボタンのように、

スクロールしていくと画面最下部に「お電話はこちら」のようなブロックを出現させる。

というものを作ったので

クリックしたら電話が繋がるようにしたいです。

 

### 発生している問題

クリックするとページのトップにスクロールバックしてしまいます。

 

### 試したこと

タップしたら電話が掛かるようにしたい

このトピックには3件の返信、3人の参加者があり、最後にCOMLSにより4ヶ月、 2週前に更新されました。 4件…

snow-monkey.2inc.org

 

aタグのtelについて (電話番号の設置方法)

このトピックには2件の返信、2人の参加者があり、最後にsuisuiにより2年、 5ヶ月前に更新されました。 3…

snow-monkey.2inc.org

 

これらを参考に

<div class="footer-tel">
<a href="tel:0123456789">お電話でのご連絡はこちら<i class="fa-solid fa-phone"></i></a>
</div>

と記述しました（電話番号は正確に入力しました）がうまく繋がらずページのトップに戻ってしまいます。

 

ご教示いただきたく存じます。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

閉じミスや大文字小文字の入力ミス等で HTML が意図したとおり解釈されていない可能性があるのかなと思いました。実際の HTML がどのように出力されているか確認してみないとわからないので、URL を共有してもらうか、その部分のデベロッパーツールのスクショを共有してもらうことはできますか？

♥ 1

いいねをした人:

[sususu]

キタジマ様、

 

 

 

こちらでわかりますでしょうか。

 

よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

詳しくありがとうございます！

全く同じ HTML 構造、CSS、フッターウィジェットエリアへのカスタム HTML ブロック配置で試してみたのですが、クリックするとちゃんと電話のダイアログが開きました。

「ページのトップに戻る」とのことなので、その電話番号リンクの全面になにか見えないリンクがあるとかなんですかねー。電話番号リンクにマウスカーソルを乗せると、ブラウザの下端にリンク先がポップアップすると思うのですが、そこはちゃんと tel:〜 になっていますかね？

♥ 1

いいねをした人:

[sususu]

検証していただきありがとうございます。

下記のJSのコードを一旦消してみると繋がりました。しかしこのスクロールして指定の場所に到達すると出現するという機能もそのまま使用したいです。

// スクロールするとフッター出現
jQuery(function ($) {
  var showFlag = false;
  var topBtn = $(".footer-tel");
  topBtn.css("bottom", "-100px");
  var showFlag = false;
  //スクロールが指定位置に達したらボタン表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 1200) {
      if (showFlag == false) {
        showFlag = true;
        topBtn.stop().animate({ bottom: "0" }, 200);
      }
    } else {
      if (showFlag) {
        showFlag = false;
        topBtn.stop().animate({ bottom: "-100px" }, 200);
      }
    }
  });

  //スクロールしてトップ
  topBtn.click(function () {
    $("body,html").animate(
      {
        scrollTop: 0,
      },
      500
    );
    return false;
  });
});

ご教示いただきたく存じます。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あーなるほど。

.footer-tel を topBtn としてますよね？
そして topBtn.click() として .footer-tel のクリック動作をデフォルトのものから JavaScript のものに変えていますよね？ だから「電話をかける」というデフォルトのクリック動作が効かなくなっています。

♥ 1

いいねをした人:

[sususu]

すみません本当ですね、気が付きませんでした。

 

ありがとうございます。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿