메뉴 건너뛰기

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

jquery를 이용해서 스크롤을 지정한 위치까지 내리면 위로 버튼을 보여주고 클릭하면 화면 제일 상단으로 이동한다.

 

 

예> html

<!-- 버튼 : 위로 -->
<button type="button" class="btn_up_layer">위로</button>

 

 

예> css

/* 버튼 : 위로 */
.btn_up_layer {position:fixed;right:15px;bottom:20px;display:none;padding:5px 10px;z-index:1;}

 

 

예> javascript + jquery

/* 위로
스크롤이 특정 위치로 이동하면 위로버튼이 나타난다.
위로버튼을 클릭하면 상단으로 이동
*/
function btn_mv_up(oj) {
 if(!oj) return false;
 var o = $(oj);
 var p = $(window).scrollTop();
 if(p > 300){ o.fadeIn('slow'); }    // 위로버튼이 나타나는 위치 지정
 else if(p < 300){ o.fadeOut('slow'); }    // 위로버튼을 숨기는 위치 지정
}

 

// 위로 버튼
$(document).scroll(function() {
  btn_mv_up('.btn_up_layer');
 }).on('click', '.btn_up_layer', function() {
  $("html, body").animate({scrollTop:0}, 'slow');
});

 

 [스크롤이 상단에 있을 경우는 위로 버튼이 보이지 않는다.]

[스크롤을 지정 위치까지 내리면 위로 버튼이 나타난다.]



출처: http://okkks.tistory.com/1066 [이건없지]

List of Articles
번호 제목 날짜 조회 수
102 JAVA 현재 시간 구하기 file 2018.07.09 6
101 JAVA 이클립스 인코딩 변경하기 file 2018.07.09 8
100 JAVA JDK 제거하기 file 2018.07.09 8
99 JAVA JDK 제거하기 file 2018.07.09 10
98 JAVA CentOS JDK 설치 및 환경변수 설정 file 2018.07.09 8
97 JAVA 정규표현식을 이용한 패턴매칭(HTML 제거) 2018.07.09 9
96 JAVA 두개의 문서 파일 비교하기 2018.07.09 8
95 JAVA 인코딩을 변경하여 파일 출력하기 (EUC_KR) 2018.07.09 7
94 JAVA TreeMap 인덱스 값 가져오기 및 Collections.sort 사용하기 2018.07.09 8
93 JAVA public, private, protected 정리 2018.07.09 8
92 JAVA HashMap의 Key값 출력하기 2018.07.09 6
91 자바 정규식 마스킹처리 file 2018.06.26 46
90 개인정보 마스킹처리 (휴대폰번호, 이메일) 2018.06.26 45
89 자바 날짜 포맷 변환 방법 file 2018.06.21 48
88 JDK 9에서 eclipse 실행이 안될때 2018.06.04 153
87 숫자형식 포멧 방법 2018.02.09 494
» jquery 스크롤(scroll) 따라다니는 배너 레이어 / 위로 버튼 / 화면 상단으로 이동 / scroll layer 이벤트 file 2017.07.04 1956
85 BigDecimal타입의 사칙연산 2016.12.22 2092
84 다양한 문자 조합을 이용한 카운팅 구하기 2016.12.09 2975
83 자바 JXL 엑셀파일을 읽어 배열리턴 : JAVA EXCEL ArrayList 2016.12.09 2608
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved