묻고답하기
스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요.
2016.07.06 02:53
http://karasnap.net/zbxe/gallery/
사이트입니다.
스크롤시 탑버튼이 생기고 누르면 부드럽게 올라갑니다.
스크롤 고정도 잘 되있구요..
또 브라우져창을 줄여도 마찬가지로 잘됩니다..그런데!!!!!
문제는 스마트폰에서 보면 맨 하단에만 고정이 되어져 있습니다.ㅠ
스크롤을 할때도 웹처럼 지정한 위치에 가만히 있게 하고 싶은데..
무엇이 문제일까요..?
제이쿼리를 이용했고 반응형 웹입니다.
html적용내용
<p id="back-top">
<a href="#top"><span></span></a>
</p>
제이쿼리적용내용
jQuery(document).ready(function($){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
CSS적용내용
/* goto top */
#back-top {
position: fixed;
bottom: 0px;
right: 20px;
}
#back-top a {
width: 40px;
display: block;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon */
#back-top span {
width: 40px;
height: 40px;
display: block;
margin-bottom: 7px;
opacity:0.5;
filter: alpha(opacity=50);
background: #26456e;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #00bfab;
}
#back-top span:before {
content: "\f102";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #fff;
font-size: 24px;
line-height: 40px;
position: absolute;
top: 0;
left: 11px;
}
고수분들의 귀한 답변 간절히 기다립니다.ㅠㅠ
- [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요?
- [2020/01/31] 묻고답하기 2단메뉴 *2
- [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. *3
- [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. *1
- [2019/03/15] 포럼 웹 에이전시 디스케이션에서 레이아웃 템플릿 판매 개시했습니다. *2
댓글 2
-
HowtoXE
2016.07.06 05:52
포지션을 absolute가 아니라 fixed로.. -
kara****
2016.07.06 11:34
바꿔보니 화살표가 없어져 버렸네요...ㅜ
갤럭시 s3에서 테스트 할땐 또 되는데 갤럭시 a3에서 테스트 하니 여전히 같은문제..
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
홍찬 | css에서 top에 화면 창 가운데라는 값 넣기 [1] | 2016.02.20 by XESTUDIO |
캣대디 | 실시간 새글 알림 애드온 특정게시판만 알림오게하려고 합니다. [5] | 2016.04.18 by 꽃민 |
꽃민 | 관리자만 알림 뜨려면... [2] | 2016.04.19 by 꽃민 |
꽃민 | 새글 알림 도와주세요..ㅠㅠ [2] | 2016.04.19 by 꽃민 |
happy19 | 휴... 배경색 설정만 했을뿐인데, 사이트가 날라갔어요. [1] | 2016.04.22 by YJSoft |
kjmedi626 | 관리자주소를 모르겠습니다...ㅠㅠ [4] | 2016.05.27 by kjmedi626 |
흑사탕 | footer 고정 [8] | 2016.06.14 by 흑사탕 |
kara**** | 스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요. [2] | 2016.07.06 by kara**** |
마이미2 | 2차 메뉴를 가로로 나타나게 하려고 합니다. [2] | 2016.07.15 by 마이미2 |
94blossom | 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] | 2016.08.02 by 라자루스 |
해운대살고싶다 | php 질문드립니다. | |
청*솔 | iframe 으로 붙혀넣기 했는데.! [2] | 2016.09.12 by 청*솔 |
영흥도우럭1 | 실시간 새글 알림 애드온..질문드립니다. | |
샤킹 | 스크롤 버튼 고정하는 방법 알려주세요!! | |
홍찬 | 2차 메뉴 열릴시 1차 메뉴 크기확장 안되게 하려면 어떻게 해야할까요? [1] | 2017.02.03 by DoorWeb |
파도. | 스케치북 최근게시물 상단 탭 오른쪽 여백 없애기 | |
쇼퍼 | php 5.16 php 5.2 이상으로 업데이트하기 | |
lifema**** | list.html에서 letter-spacing 수정 문의드립니다 [2] | 2017.03.13 by lifema**** |
쩡님아야 | 게시판과 슬라이드와의 연결고리 | |
영종몬 | 테이블 왼쪽 여백주는방법 [3] | 2017.07.03 by 영종몬 |