메뉴 건너뛰기

?

단축키

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
번호 제목 날짜 조회 수
87 숫자형식 포멧 방법 2018.02.09 303
» jquery 스크롤(scroll) 따라다니는 배너 레이어 / 위로 버튼 / 화면 상단으로 이동 / scroll layer 이벤트 file 2017.07.04 1605
85 BigDecimal타입의 사칙연산 2016.12.22 1807
84 다양한 문자 조합을 이용한 카운팅 구하기 2016.12.09 2688
83 자바 JXL 엑셀파일을 읽어 배열리턴 : JAVA EXCEL ArrayList 2016.12.09 2316
82 날짜 시간 포맷 제어 자바 클래스 : JAVA DateUtils Date time file 2016.12.09 2582
81 자바 다양한 형변환. 그리고 아스키 코드 String char int : JAVA 2016.12.09 2167
80 자바 XML 제어 라이브러리 XStream : JAVA 2016.12.09 2712
79 원하는 패턴의 날짜 구하기 : JAVA 2016.12.09 2050
78 iBATIS 동적으로 맵핑하기 2016.12.09 2115
77 GET 파라메타 쿼리문자열 컨트롤 : getQueryString 2016.12.09 2207
76 접근 제한자 private/ protected/ public / default file 2016.10.06 2171
75 예외처리(Exception handling)방법 file 2016.09.21 2592
74 My-SQL 을 이용한 JDBC file 2016.09.21 2348
73 static멤버와 관련된 예제 2016.09.21 2312
72 파일 읽고쓰는 암호화/복호화 2016.09.21 3374
71 JQuery 자동완성 플러그인 JSDT설치 file 2016.09.19 5187
70 System.out.println(); 이클립스에서 자동화기능 사용 file 2016.09.19 2912
69 웹브라우저(크롬) 설정하여 웹을 실행해 보자 file 2016.09.19 3159
68 한글이 깨졌다! 인코딩(encoding)을 설정하자 file 2016.09.19 2263
Board Pagination Prev 1 2 3 4 5 Next
/ 5

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved