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

냉동개구리 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016.08.31 19:04:39 조회 5308 (121.♡.♡.94)

본문

상단으로 가기 버튼

http://sir.kr/g5_skin/10879

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

위의 내용을 보고...

head 관련 파일에 소스를 넣고

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

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

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

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

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


<?php
if (!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

iBNeer 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-09-01 10:14:36 222.♡.♡.30

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

좀 손은 보셔야 할것 같네요


$(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; 
    }); 
});