메뉴 건너뛰기

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
번호 제목 날짜 조회 수
» jquery 스크롤(scroll) 따라다니는 배너 레이어 / 위로 버튼 / 화면 상단으로 이동 / scroll layer 이벤트 버튼 출처: http://okkks.tistory.com/1066 [이건없지] file 2017.07.04 424
85 BigDecimal타입의 사칙연산 2016.12.22 824
84 다양한 문자 조합을 이용한 카운팅 구하기 2016.12.09 1270
83 자바 JXL 엑셀파일을 읽어 배열리턴 : JAVA EXCEL ArrayList 2016.12.09 1041
82 날짜 시간 포맷 제어 자바 클래스 : JAVA DateUtils Date time file 2016.12.09 1263
81 자바 다양한 형변환. 그리고 아스키 코드 String char int : JAVA 2016.12.09 1242
80 자바 XML 제어 라이브러리 XStream : JAVA 2016.12.09 1289
79 원하는 패턴의 날짜 구하기 : JAVA 2016.12.09 964
78 iBATIS 동적으로 맵핑하기 2016.12.09 1039
77 GET 파라메타 쿼리문자열 컨트롤 : getQueryString 2016.12.09 1037
76 접근 제한자 private/ protected/ public / default file 2016.10.06 1076
75 예외처리(Exception handling)방법 file 2016.09.21 1373
74 My-SQL 을 이용한 JDBC file 2016.09.21 1152
73 static멤버와 관련된 예제 2016.09.21 1137
72 파일 읽고쓰는 암호화/복호화 2016.09.21 1660
71 JQuery 자동완성 플러그인 JSDT설치 file 2016.09.19 2733
70 System.out.println(); 이클립스에서 자동화기능 사용 file 2016.09.19 1797
69 웹브라우저(크롬) 설정하여 웹을 실행해 보자 file 2016.09.19 1733
68 한글이 깨졌다! 인코딩(encoding)을 설정하자 file 2016.09.19 1161
67 이클립스를 화려하게 꾸며보자 file 2016.09.19 1231
Board Pagination Prev 1 2 3 4 5 Next
/ 5

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved