jquery 스크롤(scroll) 따라다니는 배너 레이어 / 위로 버튼 / 화면 상단으로 이동 / scroll layer 이벤트

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 [이건없지]