목록으로

상단으로 / 하단으로 가기 버튼 질문입니다. 채택완료

냉동개구리

프로필 보기 이 회원 글보기 이 회원의 댓글보기

9년 전 조회 5,401

답변 2

상단으로 가기 버튼

http://sir.kr/g5_skin/10879

==================================================

위의 내용을 보고...

head 관련 파일에 소스를 넣고

..을 적용하니 잘 작동됩니다.

맨 아래로 가기 버튼도 추가를 하고 싶어서,

topscroll이라고 되어 있는 부분을 복사해서 bottomscroll 으로 바꿔서 추가를 해봤는데

맨위로가기 버튼만 나와서 정상작동되고,

아래로가기 버튼이 작동이 안되는걸 떠나서 아예 버튼 모양조차 안 나옵니다 ;;;;;

Copy

<?phpif (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가include_once(G5_PATH.'/_head.php');?> <style type="text/css">/* BackToTop button css */#Topscroll {    position:fixed;    right:150px;    bottom:200px;    cursor:pointer;    width:50px;    height:50px;    background-color:#3498db;    text-indent:-9999px;    display:none;    -webkit-border-radius:60px;    -moz-border-radius:60px;    border-radius:60px}#Topscroll span {    position:absolute;    top:50%;    left:50%;    margin-left:-8px;    margin-top:-12px;    height:0;    width:0;    border:8px solid transparent;    border-bottom-color:#ffffff}#Topscroll:hover {    background-color:#e74c3c;    opacity:1;filter:"alpha(opacity=100)";    -ms-filter:"alpha(opacity=100)";} #Bottomscroll {    position:fixed;    right:150px;    bottom:50px;    cursor:pointer;    width:50px;    height:50px;    background-color:#3498db;    text-indent:-9999px;    display:none;    -webkit-border-radius:60px;    -moz-border-radius:60px;    border-radius:60px}#Bottomscroll span {    position:absolute;    top:50%;    left:50%;    margin-left:-8px;    margin-top:-12px;    height:0;    width:0;    border:8px solid transparent;    border-bottom-color:#ffffff}#Bottomscroll:hover {    background-color:#e74c3c;    opacity:1;filter:"alpha(opacity=100)";    -ms-filter:"alpha(opacity=100)";}</style><script>$(document).ready(function(){     $(window).scroll(function(){         if ($(this).scrollTop() > 100) {             $('#Topscroll').fadeIn();         } else {             $('#Topscroll').fadeOut();         }     });     $('#Topscroll').click(function(){         $("html, body").animate({ scrollTop: 0 }, 200);         return false;     }); });</script><script>$(document).ready(function(){     $(window).scroll(function(){         if ($(this).scrolltop() < 100) {             $('#Bottomscroll').fadeIn();         } else {             $('#Bottomscroll').fadeOut();         }     });     $('#Bottomscroll').click(function(){         $("html, body").animate({ scrolltop: 0 }, 200);         return false;     }); });</script> <div> <a href="javascript:void(0);" id="Topscroll" title="Scroll to Top" style="display: none;">Top<span></span></a></div> <div> <a href="javascript:void(0);" id="Bottomscroll" title="Scroll to Bottom" style="display: none;">Bottom<span></span></a> </div>

#그누보드5 #하단으로가기버튼

답변 2개

정렬:

채택된 답변

+20 포인트

iBNeer

프로필 보기 이 회원 글보기 이 회원의 댓글보기

9년 전

급하게 테스트 한 내용입니다.

좀 손은 보셔야 할것 같네요

Copy

$(document).ready(function(){   $('#Bottomscroll').fadeIn();     $(window).scroll(function(){         if ($(this).scrollTop() > 200&&$(this).scrollTop()!=0) {             $('#Topscroll').fadeIn();             $('#Bottomscroll').fadeOut();         } else {             $('#Topscroll').fadeOut();            $('#Bottomscroll').fadeIn();         }     });     $('#Topscroll').click(function(){         $("html, body").animate({ scrollTop: 0 }, 200);         return false;     });         $('#Bottomscroll').click(function(){         $("html, body").animate({ scrollTop: ($(document).height()-$(window).height())+'px' }, 200);         return false;     }); });

로그인 후 평가할 수 있습니다