기 타 티스토리에서 눌렀을 때 맨 아래/맨 위로 이동하는 버튼을 만들고 싶습니다
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 | - | - |
67988 | 하드웨어| TLC SSD가 MLC SSD의 속도에 필적하는 이유가 뭔가요? [8] | 메리아 | 1269 | 03-11 |
67987 | 하드웨어| C 드라이브용(윈도우 설치용) SSD 추천 [4] | 럭키보이 | 702 | 03-11 |
67986 | 하드웨어| 본체 전원넣으면 아무런 반응도 없습니다. [10] | 초보라서죄 | 640 | 03-11 |
67985 | 하드웨어| 아이폰6 wifi 속도 문의... [7] | ♡오르골 | 478 | 03-11 |
67984 | 윈 도 우| vhd 에러가 나서요 [4] | 1992 | 236 | 03-11 |
67983 | 윈 도 우| FX8300 4.4G 오버클럭시 최대클럭 표시 오류 | 슈퍼사이즈 | 401 | 03-11 |
67982 | 윈 도 우| gho 형식의 윈도우 설치파일을 usb에 담아 새 컴퓨터에 os... [6] | 판쓸a | 1194 | 03-11 |
67981 | 하드웨어| 샌디스크 크루저 블레이드 usb가 포맷후에 사용할 수 없게 ... [3] | 판쓸a | 799 | 03-11 |
67980 | 소프트웨어| 노트북 도난방지 무료 소프트웨어가 있나요? [5] | 비려막존 | 672 | 03-10 |
67979 | 하드웨어| 메모리 속도 문의 드립니다. [4] | 줄넘기 | 421 | 03-10 |
67978 | 윈 도 우| 파티션 합치는 법? [11] | 와봉 | 989 | 03-10 |
67977 | 윈 도 우| 어떻게 다루는지 잘 모르겠어서 그러는데요 [1] | 궁금해 | 313 | 03-10 |
67976 | 윈 도 우| 윈도우7) 프로그램 실행시 잠금할수있는 방법 있나요? [3] | ♡오르골 | 309 | 03-10 |
67975 | 하드웨어| MX300 구매후 속도측정.. [9] | 와봉 | 569 | 03-10 |
67974 | 기 타| 노트북 문제 [5] | 홍초리 | 441 | 03-10 |
67973 | 윈 도 우| 윈도우10은 현존 usb 3.0, 3.1 드라이버를 모두 포함? [1] | ksire | 1625 | 03-10 |
» | 기 타| 티스토리에서 눌렀을 때 맨 아래/맨 위로 이동하는 버튼을 ... | TetraTheta | 205 | 03-10 |
67971 | 모 바 일| 계좌조회 단축키 [1] | 유쾌상쾌 | 533 | 03-10 |
67970 | 윈 도 우| 하드가 인식이 안 됩니다!! 도움 주시면 감사하겠습니다... [7] | 자하 | 686 | 03-10 |
67969 | 윈 도 우| 모던동영상이 느리고 소리가 출력이 안되는 것은 어떻게 해... [6] | 김번 | 370 | 03-09 |