tel:000-000-0000 태그가 안먹히고 위로가기가 됩니다.
본문
원래 우측 하단에 gotop 아이콘만 있었는데, 아이콘 위에 전화걸기 아이콘을
추가로 만들어 모바일에서 클릭하면 전화걸기가 뜨게끔 하려고 코드를 수정했습니다.
그런데 전화걸기가 안되고 위로가기가 되버립니다.
뭐가 문제인지 잘 모르겠어요ㅠㅠ
전화걸기 아이콘 태그부분
<a href="tel:전화번호" title="" class="back-to-top-phone"></a>
<a href="#" title="위로가기" class="back-to-top">To Top ↑</a>
전화걸기 아이콘 css부분
.back-to-top{position:fixed; bottom:8px; right:8px; width:42px; height:43px; line-height:43px; background:url(images/gotop.png) no-repeat; font-size:10px; text-indent:-9999px; text-align:center; display:none; z-index:9999; cursor:pointer}
.back-to-top-phone{position:fixed; bottom:75px; right:8px; width:42px; height:43px; line-height:43px; background:url(images/gotop_phone.png) no-repeat; font-size:10px; text-indent:-9999px; text-align:center; z-index:9999;}
!-->!-->
답변 6
<a href="tel:전화번호" title="" class="back-to-top-phone">tel</a> 한번 넣어보실래요~
display:block 넣어보셨나요?
영역이 안잡히는거 같은데 클릭이 된다니 아닌거 같기도 하네요^^
.back-to-top-phone{display:block;position:fixed; bottom:75px; right:8px; width:42px; height:43px; line-height:43px; background:url(images/gotop_phone.png) no-repeat; font-size:10px; text-indent:-9999px; text-align:center; z-index:9999;}
<a href="tel:전화번호" title="" ><span class="back-to-top-phone"> </span></a>
<br/>
<a href="#" title="위로가기" class="back-to-top">To Top ↑</a>
로 변경해보세요
!-->
ㅋㅋ
작성하신 CSS에 버그가 있네요
.back-to-top{position:fixed;
bottom:8px;
right:8px;
width:42px;
height:43px;
line-height:43px;
background:url(images/gotop.png) no-repeat; font-size:10px; text-indent:-9999px; text-align:center; display:none; z-index:9999; cursor:pointer}
혹시 html안에 <meta name="format-detection" content="telephone=no, address=no, email=no"/>.이런 코드가 있으면 삭제해보세요. 숫자를 그냥 숫자로만 인식하도록 만들어서 전화가 안될 수 있습니다
자문자답합니다.
back-to-top 작동 스크립트가 jquery에 통합되어 있었습니다.
관련 js파일에서 아래 부분을 주석처리했더니 gotop 버튼 제대로 작동하고
전화걸기도 잘 작동합니다.
댓글 주신 모든 회원님들 감사드리고 새해 복 많이 받으세용!!
// $('.back-to-top-phone').click(function(event) {
// event.preventDefault();
// $('html, body').animate({scrollTop: 0}, duration);
// return false;
// });