메뉴 건너뛰기

?

단축키

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
번호 제목 날짜 조회 수
91 자바 정규식 마스킹처리 file 2018.06.26 2672
90 개인정보 마스킹처리 (휴대폰번호, 이메일) 2018.06.26 3995
89 자바 날짜 포맷 변환 방법 file 2018.06.21 1485
88 JDK 9에서 eclipse 실행이 안될때 2018.06.05 1639
87 숫자형식 포멧 방법 2018.02.09 2418
» jquery 스크롤(scroll) 따라다니는 배너 레이어 / 위로 버튼 / 화면 상단으로 이동 / scroll layer 이벤트 file 2017.07.05 4126
85 BigDecimal타입의 사칙연산 2016.12.22 3766
84 다양한 문자 조합을 이용한 카운팅 구하기 2016.12.09 4977
83 자바 JXL 엑셀파일을 읽어 배열리턴 : JAVA EXCEL ArrayList 2016.12.09 4429
82 날짜 시간 포맷 제어 자바 클래스 : JAVA DateUtils Date time file 2016.12.09 5287
81 자바 다양한 형변환. 그리고 아스키 코드 String char int : JAVA 2016.12.09 4240
80 자바 XML 제어 라이브러리 XStream : JAVA 2016.12.09 4969
79 원하는 패턴의 날짜 구하기 : JAVA 2016.12.09 3662
78 iBATIS 동적으로 맵핑하기 2016.12.09 4005
77 GET 파라메타 쿼리문자열 컨트롤 : getQueryString 2016.12.09 4772
76 접근 제한자 private/ protected/ public / default file 2016.10.06 5179
75 예외처리(Exception handling)방법 file 2016.09.21 4631
74 My-SQL 을 이용한 JDBC file 2016.09.21 4322
73 static멤버와 관련된 예제 2016.09.21 3799
72 파일 읽고쓰는 암호화/복호화 2016.09.21 7448
Board Pagination Prev 1 2 3 4 5 6 7 8 Next
/ 8

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved