묻고답하기
스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요.
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 고정 [8] | 2016.06.14 by 흑사탕 |
kara**** | 스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요. [2] | 2016.07.06 by kara**** |
94blossom | 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] | 2016.08.02 by 라자루스 |
흑사탕 | 인덱스 배경 링크 걸기 [4] | 2016.08.04 by 흑사탕 |
홍찬 | hover 했을시 다른 class 동작 하는 css [3] | 2017.02.02 by HowtoXE |
홍찬 | 2차 메뉴 열릴시 1차 메뉴 크기확장 안되게 하려면 어떻게 해야할까요? [1] | 2017.02.03 by DoorWeb |
쇼퍼 | php 5.16 php 5.2 이상으로 업데이트하기 | |
rusaka**** | 레이아웃 및 문서페이지 스킨 설치안됨 | |
lun**** | 레이아웃 설치 후 게시판에러 | |
LeeMark | XE코어 첫 다운로드 이후에 'HTTP ERROR 500' 에러가 납니다. [2] | 2018.11.26 by 기진곰 |
BarryWhite | XE 모바일 게시판 스킨 색상 변경, 어떻게 하죠? [2] | 2019.03.23 by BarryWhite |
Spooky | 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. [1] | 2019.03.29 by Spooky |
가입명 | footer 하단에 고정하려면 어딜 수정해야 할까요? |