메뉴 건너뛰기

?

단축키

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

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved