상단이동 스크롤 버튼 만들기 (아래로 스크롤시 생성)

아래로 스크롤 하면 상단이동 버튼이 보여집니다.



<!-- 상단이동 스크롤 버튼 만들기 (아래로 스크롤시 생성) -->

<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>

사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

T. 1566-5733  F. 02-6499-3299

이메일: so2815@naver.com

Copyright© Adliving. All right reserved. 


고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호

고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호

T. 1566-5733  F. 02-6499-3299

이메일: so2815@naver.com


사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved.