상단으로 가기 버튼
==================================================
위의 내용을 보고...
head 관련 파일에 소스를 넣고
<a href="javascript:void(0);" id="Topscroll" title="Scroll to Top" style="display: none;">Top<span></span></a></div>
..을 적용하니 잘 작동됩니다.
맨 아래로 가기 버튼도 추가를 하고 싶어서,
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>답변 2개 / 댓글 3개
채택된 답변
+20 포인트
iBNeer
2016-09-01 (목) 10:14:36
급하게 테스트 한 내용입니다.
좀 손은 보셔야 할것 같네요
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; }); });답변에 대한 댓글 2개
냉동개구리
2016-09-01 (목) 20:20:17
iBNeer
2016-09-02 (금) 08:56:33
보통 맨 밑으로 버튼까지 만드시는 경우에는
처음부터 상.하 버튼을 모두 노출시키는 경우가 많습니다.
처음부터 상.하 버튼을 모두 노출시키는 경우가 많습니다.
2016-08-31 (수) 22:24:28
같은스크립트가 2개여서 안나올수있습니다. top스크립트를 삭제하시고 bottom만놓고 해보세요.
만약 bottom버튼이 나온다면 top와bottom스크립트를 합쳐서하시면될것같습니다.
답변에 대한 댓글 1개
냉동개구리
2016-09-01 (목) 20:21:16
답변 갑사합니다
스크립트를 합치고 변형을 주는거 자체가 뭘 좀 알아야 되는거였네요
스크립트를 합치고 변형을 주는거 자체가 뭘 좀 알아야 되는거였네요
답변을 작성하려면 로그인이 필요합니다.
역시나 단순한 짜집기로는 해결이 안되는거였네요 ㅠㅠ