기 타 티스토리에서 눌렀을 때 맨 아래/맨 위로 이동하는 버튼을 만들고 싶습니다
2017.03.10 12:16
구글링 해서 어찌어찌 맨 위로 가는 버튼은 만들었는데, 그걸 고대로 이용해서 맨 밑으로 가려는 버튼을 만드려니까 안되는군요... 여기서 뭘 어떻게 수정해야 할지 여쭈어봅니다.
HTML
<!-- TOP 버튼 추가 -->
<a href="#" class="jcm-top"><img src="./images/top.png" style="margin-bottom: 60px;width:60px;"></a><!-- 크기 선언 무의미 -->
<a href="#" class="jcm-bottom"><img src="./images/bottom.png" style="margin-bottom: 60px;width:60px;"></a>
<script>
$( document ).ready( function() {
$( window ).scroll( function() {
if ( $( this ).scrollTop() > 450 ) {
$( '.jcm-top' ).fadeIn();
} else {
$( '.jcm-top' ).fadeOut();
}
} );
$( '.jcm-top' ).click( function() {
$( 'html, body' ).animate( { scrollTop : 0 }, 200 ); /* 숫자 작을수록 빠름 */
return false;
} );
} );
</script>
<script>
$( document ).ready( function() {
$( window ).scroll( function() {
if ( $( this ).scrollTop() > 450 ) {
$( '.jcm-bottom' ).fadeIn();
} else {
$( '.jcm-bottom' ).fadeOut();
}
} );
$( '.jcm-bottom' ).click( function() {
$( 'html, body' ).animate( { scrollTop = 0, document.body.scrollHeight }, 200 ); /* 숫자 작을수록 빠름 */
return false;
} );
} );
</script>
CSS
/* TOP 버튼 */
a.jcm-top {
position: fixed;
right: 15px;
bottom: 15px;
border-radius: 5px;
color: #ffffff;
text-align: center;
width: 60px; /* 여기서 크기 조절 */
height: 60px;
font-size: 40px;
background-color: rgba(0,0,0,0.3);
z-index: 99999;
display: none;}
a.jcm-top:hover{background-color:#000}
a.jcm-bottom {
position: fixed;
right: 75px;
bottom: 15px;
border-radius: 5px;
color: #ffffff;
text-align: center;
width: 60px; /* 여기서 크기 조절 */
height: 60px;
font-size: 40px;
background-color: rgba(0,0,0,0.3);
z-index: 99999;
display: none;}
a.jcm-bottom:hover{background-color:#000}
이걸 어찌 해야 할까요? 으으으... 일단 업로드된 파일이라던가 다 살펴봐도 이게 전부인거 같은데...