기 타 티스토리에서 눌렀을 때 맨 아래/맨 위로 이동하는 버튼을 만들고 싶습니다
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}
이걸 어찌 해야 할까요? 으으으... 일단 업로드된 파일이라던가 다 살펴봐도 이게 전부인거 같은데...
댓글 [0]
번호 | 제목 | 글쓴이 | 조회 | 등록일 |
---|---|---|---|---|
[공지] | 질문과 답변 게시판 이용간 유의사항 | gooddew | - | - |
68531 | 소프트웨어| acronis true image2017문의 [2] | 뷰티블마인 | 340 | 04-14 |
68530 | 하드웨어| 램 추가 몇 기가까지 하는 것이 나을까요? [5] | 기억의멜로 | 1428 | 04-14 |
68529 | 소프트웨어| 핫스팟(폰) 하는사람을 해킹할수있을가요? [4] | shy1911 | 1327 | 04-14 |
68528 | 기 타| 윈빌더 질문 [1] | gkgk77 | 316 | 04-14 |
68527 | 기 타| 아크로벳 리더 open시 설정문의 [5] | 뷰티블마인 | 381 | 04-14 |
68526 | 하드웨어| USB외장하드에 고전류 아답타 써도 되나요? [4] | 알라뷰 | 460 | 04-14 |
68525 | 윈 도 우| .wim파일을 USB로 굽는데 [2] | 수박바 | 528 | 04-14 |
68524 | 기 타| 윈빌더 질문 [2] | gkgk77 | 318 | 04-14 |
68523 | 윈 도 우| 윈도우10 RS2 엣지 그림 안보이는 현상 [6] | wpswkdoo | 1152 | 04-14 |
68522 | 윈 도 우| RS2에서 익스플로러 못쓸 정도네요. [7] | 알라뷰 | 1255 | 04-14 |
68521 | 기 타| 막힌 유튜브 파일을 다운 받는 툴이나 방법이 있는지요? [7] | 밝은해 | 825 | 04-14 |
68520 | 윈 도 우| 윈도우 설치CD로부터 user32.dll을 복원하는게 포맷과 같은... | 실시간 | 636 | 04-14 |
68519 | 윈 도 우| 익스플로러 엣지 고급설정에 대해 질문드립니다 | SSaG | 607 | 04-14 |
68518 | 하드웨어| 공유기에 폰이 10대정도 물려질때 IPTV의 소리가 느려져요. [11] | 솔피 | 1156 | 04-13 |
68517 | 윈 도 우| win10 종료가 안될때 [3] | 뷰티블마인 | 2994 | 04-13 |
68516 | 윈 도 우| RS2에서 새로 생긴 앱 이거 어떻게 지우나요 [8] | 솔트 | 997 | 04-13 |
68515 | 윈 도 우| 인터넷 익스플로러 주소변경해주는 레지스트리 구할 수 있... [2] | 부가티 | 534 | 04-13 |
68514 | 윈 도 우| 원도우10 아프리카티비 | 울푸 | 590 | 04-13 |
68513 | 윈 도 우| 윈7 사용하던 하드를 다른 컴에서 사용하는 방법? [1] | 번개 | 490 | 04-13 |
68512 | 윈 도 우| efi,gpt 윈도우10에 VHD 윈도우7 멀티부팅 [10] | 엉큼이 | 1084 | 04-13 |