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;
}

고수분들의 귀한 답변 간절히 기다립니다.ㅠㅠ