묻고답하기
스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요.
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 남기남 |
가입명 | footer 하단에 고정하려면 어딜 수정해야 할까요? | |
립샤 | 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 [1] | 2018.10.15 by 르미 |
너무잠이와요 | xe_document_extra_keys 테이블의 var_idx 값 [2] | 2018.01.16 by 너무잠이와요 |
너무잠이와요 | insert xml 쿼리문 [2] | 2018.01.15 by 너무잠이와요 |
너무잠이와요 | 스킨내에서 query 문 실행 [2] | 2018.01.12 by 너무잠이와요 |
붉은석양 | 시놀로지NAS XE 설치중 짧은주소 설정문제 도움요청 [1] | 2017.06.13 by Luatic™ |
lifema**** | list.html에서 letter-spacing 수정 문의드립니다 [2] | 2017.03.13 by lifema**** |
파도. | 스케치북 최근게시물 상단 탭 오른쪽 여백 없애기 | |
김선달 | 간단한 css 좀 부탁드립니다. | |
94blossom | 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] | 2016.08.02 by 라자루스 |
kara**** | 스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요. [2] | 2016.07.06 by kara**** |
더블엠씨 | 스케치북 게시판(웹진형 카드디자인)의 목록의 글자를 키우고 싶습니다. 5시간째 방황중입니다 .ㅜㅜ [9] | 2015.07.31 by 더블엠씨 |
텔라스 | 아이프레임 가로 길이 문제 | |
텔라스 | 페이지 간 이동 시 하단 푸터 속 음악을 유지하고 싶습니다. [4] | 2015.06.09 by 텔라스 |