관리자 모드에서 상하단으로 이동하는 메뉴

관리자 모드에서 상하단으로 이동하는 메뉴

관리자 모드에서 내용이 길어질때 스크롤시 자동으로 상하단 이동 메뉴가 나오는 팁입니다.

1) /adm/admin.head.php 추가 내용

<script>
var tempX = 0;
var tempY = 0;

위에 아래의 내용 추가

<!-- // 상하단으로 이동하는 메뉴 관련 -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
div#adm_scroll_top {position: fixed;display: block;right: 1px;bottom: 30px;width: 70px;height: 40px;text-align: center;z-index:10;}
div#adm_scroll_top .fa:hover { color:red;}
</style>
<!-- // 상하단으로 이동하는 메뉴 관련 -->


2) /adm/admin.tail.php 제일 하단에 내용 추가

<!-- // 상하단으로 이동하는 메뉴 관련 -->
<div id="adm_scroll_top">
<a href="#" id="adm_scroll_top_dn"><i class="fa fa-arrow-circle-down fa-3x" aria-hidden="true"></i></a>
<a href="#" id="adm_scroll_top_up"><i class="fa fa-arrow-circle-up fa-3x" aria-hidden="true"></i></a>
</div>
<script>
// 상하단으로 이동하는 메뉴 관련
$(document).ready(function(){
// hide #adm_scroll_top first
$("#adm_scroll_top").hide();
// fade in & fade Out #adm_scroll_top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#adm_scroll_top').fadeIn();
} else {
$('#adm_scroll_top').fadeOut();
}
});

// scroll body to 0px on click : 제일 상단
$('#adm_scroll_top_up').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});

// scroll body to $(document).height() on click : 제일 하단
$('#adm_scroll_top_dn').click(function () {
$('body,html').animate({
scrollTop: $(document).height()
}, 400);
return false;
});
});
});
</script>
<!-- // 상하단으로 이동하는 메뉴 관련 -->