마카로닉스

1817 No

탑으로 (top) , 맨 위로 가기 버튼 만들기, 상단으로, 탑으로,

2022-01-05 22:43:17 By 라이트 0 1563 댓글수 6 포스트 하기

12월 2025
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

1.방법

html

<div style="margin-bottom:2000px;">
빈 공백
</div>
<a id="topBtn" href="#">TOP</a>

css

@font-face { font-family: 'TTTogether'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff'); font-weight: normal; font-style: normal; }

#topBtn {
    text-decoration: none;
    position: fixed;
    bottom: 120px;
    right: 10px;
    width: 60px;
    height: 60px;
    color: #4f8397;
    box-shadow: 0 0 15px #4f839750;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    text-align: center;
    line-height: 58px !important;
    font: normal 16px "TTTogether";     
    text-transform: lowercase;
    z-index: 9999; /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */ 
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
      border: none;
      cursor: pointer;
      display: none;
}

#topBtn:hover {
	color: #fff;
	background: rgba(79, 131, 151, .7);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}


/* ✅ 모바일 전용 스타일 */
@media (max-width: 768px) {
  #topBtn {
    bottom: 80px;   /* 화면이 좁으니 좀 더 위로 */
    right: 15px;    /* 살짝 안쪽으로 */
    width: 45px;    /* 버튼 크기 줄임 */
    height: 45px;
    font-size: 13px;
    line-height: 45px !important;
    box-shadow: 0 0 10px #E0C1B8;
	
  }

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 250) {
      $('#topBtn').fadeIn();
    } else {
      $('#topBtn').fadeOut();
    }
  });

  $("#topBtn").click(function() {
    $('html, body').animate({
      scrollTop : 0
    }, 400);
    return false;
  });
});

바닐라 JS 할경우

<script>
document.addEventListener("DOMContentLoaded", function() {
    var topBtn = document.getElementById("topBtn");

    window.addEventListener("scroll", function() {
        if (window.scrollY > 250) {
            topBtn.style.display = "block";
        } else {
            topBtn.style.display = "none";
        }
    });

    topBtn.addEventListener("click", function(e) {
        e.preventDefault();
        smoothScrollToTop(400);
    });

    function smoothScrollToTop(duration) {
        var start = window.scrollY;
        var startTime = 'now' in window.performance ? performance.now() : new Date().getTime();

        var documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
        var windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
        var destinationOffset = 0;
        var destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset);

        if ('requestAnimationFrame' in window === false) {
            window.scroll(0, destinationOffsetToScroll);
            return;
        }

        function scroll() {
            var now = 'now' in window.performance ? performance.now() : new Date().getTime();
            var time = Math.min(1, ((now - startTime) / duration));
            var timeFunction = (time * (2 - time));
            window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start));

            if (window.scrollY === destinationOffsetToScroll) {
                return;
            }

            requestAnimationFrame(scroll);
        }

        scroll();
    }
});

</script>

2.방법

1)lodash 에서 throttle 사용

2) gsap 라이브러리 추가

https://cdnjs.com/libraries/lodash.js

https://cdnjs.com/libraries/gsap

html

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  

<!-- gsap &  ScrollToPlugin -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js" integrity="sha512-1dalHDkG9EtcOmCnoCjiwQ/HEB5SDNqw8d4G2MKoNwjiwMNeBAkudsBCmSlMnXdsH8Bm0mOd3tl/6nL5y0bMaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollToPlugin.min.js" integrity="sha512-gXXZigEOXAVnGZ2otmK1DqTFK/vF87A+x6Owjf5CN+zVxcg9bLg3F6J1s9yGnFFT08QLt7G0vI3XNWJVue260w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

      <div id="to-top" onclick="toTop(event)">   
          <div class="material-icons">arrow_upward</div>
      </div>

css

#to-top{
    display: inline-block;
    position: fixed;
    right: 30px;   
    bottom: 30px;
    width: 42px;
    height: 42px;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    z-index: 9;
    color: #fff;
    transition: .5s;
}


#to-top:hover{
    background-color: #fff;
    color: #333;
}

window.addEventListener("scroll", _.throttle(function(){
    if(window.scrollY > 500){
        //버튼 보이기!
        gsap.to("#to-top",.2, {
            x:0,            
        });
    }else{
        //버튼 숨기기!
        gsap.to("#to-top",.2, {
            x:100,            
        });
    }    
}, 300));

function toTop(event){
    console.log(event);
    gsap.to(window,.7, {
        scrollTo:0,            
    });
}

3. 레드

<a id="topBtn" href="#">TOP</a>


<style>
@font-face { font-family: 'TTTogether'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff'); font-weight: normal; font-style: normal; } 
#topBtn {
    text-decoration: none;
    position: fixed;
    bottom: 120px;
    right: 10px;
    width: 60px;
    height: 60px;
    color: #d31321;
    box-shadow: 0 0 15px #E0C1B8;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    text-align: center;
    line-height: 58px !important;
    font: normal 16px "TTTogether";     
    text-transform: lowercase;
    z-index: 9999; /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */ 
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
    border: none;
    cursor: pointer;
    display: none;
} 
#topBtn:hover {
    color: #fff;
    background: #d31321;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/* ✅ 모바일 전용 스타일 */
@media (max-width: 768px) {
  #topBtn {
    bottom: 80px;   /* 화면이 좁으니 좀 더 위로 */
    right: 15px;    /* 살짝 안쪽으로 */
    width: 45px;    /* 버튼 크기 줄임 */
    height: 45px;
    font-size: 13px;
    line-height: 45px !important;
    box-shadow: 0 0 10px #E0C1B8;
	
  }
}

</style>

<script>

$(function() {
//상단으로	
  $(window).scroll(function() {
    if ($(this).scrollTop() > 250) {
      $('#topBtn').fadeIn();
    } else {
      $('#topBtn').fadeOut();
    }
  });
 
  $("#topBtn").click(function() {
    $('html, body').animate({
      scrollTop : 0
    }, 400);
    return false;
  });
});


</script>