기 타 티스토리에서 눌렀을 때 맨 아래/맨 위로 이동하는 버튼을 만들고 싶습니다
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 | - | - |
68047 | 하드웨어| 메인보드와 메모리 호환관련 문의드립니다. [1] | 윈포우도럼 | 288 | 03-16 |
68046 | 기 타| 메인보드만 바꾸면 다른기기가 되나요? [4] | cosmosa | 688 | 03-16 |
68045 | 윈 도 우| 외장하드로 USB 설치 문의 드립니다. [1] | votto | 361 | 03-16 |
68044 | 윈 도 우| LG Free Dos 새노트북 스카이레이크에 윈도우7 x64 설치를.. [7] | 씻으면이정 | 1475 | 03-15 |
68043 | 윈 도 우| 윈도우10 에서 사용가능한 램드라이버 추천 부탁드립니다. [4] | 뭉게구름 | 663 | 03-15 |
68042 | 윈 도 우| 문의)) 원도우 부팅시~ 이 부분에서 시간이 많이 걸립니다~... [5] | chobits | 1155 | 03-15 |
68041 | 윈 도 우| 아랫글에이어 혹시나해서...(시스템파일손상관련) [4] | shy1911 | 256 | 03-15 |
68040 | 기 타| 티스토리 블로그에 웹폰트로 몇가지 기능을 구현하려 합니다 [2] | TetraTheta | 253 | 03-15 |
68039 | 윈 도 우| Win10AeroPE64 pe.iso 구합니다 [5] | gkgk77 | 1137 | 03-15 |
68038 | 윈 도 우| [윈10] 업데이트 하다가 컴퓨터 전원이꺼지면 [2] | shy1911 | 949 | 03-15 |
68037 | 윈 도 우| 윈10 에서 초기화를 하면 [2] | never | 942 | 03-15 |
68036 | 기 타| 구글 홈페이지 [5] | 오후9시7분 | 424 | 03-15 |
68035 | 윈 도 우| msconfig 에서 화살표부분의 체크부분을 [6] | never | 519 | 03-15 |
68034 | 기 타| path 연결 법 문의드립니다. [1] | 나양말많아 | 186 | 03-15 |
68033 | 윈 도 우| 윈도우7 드라이버팩 통합시 오류문의요 [1] | 령은아빠 | 296 | 03-15 |
68032 | 윈 도 우| 노트북 도스프리 샀는데요 [2] | 늘푸르다 | 1010 | 03-15 |
68031 | 소프트웨어| 이게 바보같은 소리라는 건 압니다만.. [6] | 늦둥이it | 986 | 03-14 |
68030 | 소프트웨어| 데모노이드 초대장 부탁 드립니다. [3] | fairlove | 308 | 03-14 |
68029 | 윈 도 우| UEFI 시스템에서 BCD 등록 [3] | 류비 | 684 | 03-14 |
68028 | 윈 도 우| themida 오류 이게 뭔가요? [1] | titcat | 943 | 03-14 |