상단이동 스크롤 버튼 만들기 (아래로 스크롤시 생성)
아래로 스크롤 하면 상단이동 버튼이 보여집니다.
<!-- 상단이동 스크롤 버튼 만들기 (아래로 스크롤시 생성) -->
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("scrollTopBtn").style.display = "block";
} else {
document.getElementById("scrollTopBtn").style.display = "none";
}
}
</script>
<style>
#scrollTopBtn {
display: none;
position: fixed;
bottom: 150px; /* 최하단을 기준으로 아래 쪽 거리를 입력합니다. */
right: 20px; /* 최우측을 기준으로 오른쪽 거리를 입력합니다. */
z-index: 999;
border: none; /* 버튼 테두리 선 삭제, 1px 이상으로 변경해 테두리를 넣을 수 있습니다. */
outline: none;
background-color: rgba(0, 161, 224, 0.55); /* 버튼의 배경색 변경합니다. */
color: #ffffff; /* 버튼 텍스트 색상을 변경합니다. */
font-size: 0.95em; /* 버튼 텍스트의 크기(em 또는 px)를 변경합니다. */
font-weight: bold; /* 버튼 텍스트를 두껍게 합니다. normal; 로 변경할 수 있습니다. */
cursor: pointer;
padding: 8px 8px; /* 버튼 내부 여백을 지정합니다. 13px은 상하, 15px은 좌우 여백입니다. */
border-radius: 4px; /* 버튼 모서리를 둥글게 변경합니다. */
}
#scrollTopBtn:hover {
color: #ffffff; /* 버튼에 마우스를 올렸을 때 텍스트 색상입니다. */
background-color: #333333; /* 버튼에 마우스를 올렸을 때 배경 색상입니다. */
}
</style>
<button class="hidden-sm" onclick="$('html, body').animate({scrollTop: $('#doz_header').offset().top },500);" id="scrollTopBtn" title="Go to top">TOP</button>
