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');
});
[스크롤이 상단에 있을 경우는 위로 버튼이 보이지 않는다.]
[스크롤을 지정 위치까지 내리면 위로 버튼이 나타난다.]
더보기>
