jquery를 이용해서 스크롤을 지정한 위치까지 내리면 위로 버튼을 하단 오른쪽에 보여주고 클릭하면 화면 제일 상단으로 이동한다.
모바일웹에서도 사용할 수 있다.
예> html
<!-- 버튼 : 위로 -->
<button type="button" class="btn_up_layer">위로</button>
예> css
/* 버튼 : 위로 */
.btn_up_layer {position:absolute;top:0;right:30px;display:none;padding:5px 10px;z-index:1;}
예> javascript + jquery
/* 위로
스크롤이 특정 위치로 이동하면 위로버튼이 나타난다.
위로버튼을 클릭하면 상단으로 이동
*/
function btn_mv_up(oj) {
if(!oj) return false;
var st = $(window).scrollTop();
var h = $(window).height();
$(oj).stop().hide().css('top',h + st - 50); // 스크롤 이동에 따른 위로버튼의 위치 이동
if(st > 900) { $(oj).fadeIn(); } // 위로버튼을 보여주는 위치 지정
else if(st < 900) { $(oj).stop().fadeOut(); } // 위로버튼을 숨기는 위치 지정
}
// 위로 버튼
$(document).scroll(function() {
btn_mv_up('.btn_up_layer');
}).on('click', '.btn_up_layer', function() {
$("html, body").animate({scrollTop:0}, 'slow');
});
더보기>
