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, }); }
댓글 ( 6)
댓글 남기기