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: 40px;
	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;
}


#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);
}

js

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

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

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

js

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,            
    });
}