[JS] TOP 버튼 만들기

자바스크립트 TOP 버튼 만들기

 

🩸이슈 발생

어디서나 볼 수 있는 자동 스크롤 업 기능(TOP) 버튼 5초 만에 만들어보기

 

728x90

 

---

🩹이슈 해결

1. HTML

<button id="top-btn"> ▲ <br/> TOP </button >

2. CSS

#top-btn { 
    display: none; 
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 999;
    background-color: white;
    border: 2px solid #dbdbdb;
    outline: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    font-size: 20px;
    font-weight: 500;
    color: #333333;
}

3. JavaScript

$(document).ready(function() { 

    // Top 버튼 특정 스크롤높이에서만 보이기 / 숨기기
    $(window).scroll(function(){
    	if($(this).scrollTop() > 100){
        	$('#top-btn').fadeIn();
        }else{
        	$('#top-btn').fadeOut();
        }
    });
    
    // Top 버튼 클릭시 페이지 상단으로 이동
   	$('#top-btn').click(function(){
    	$('html, body').animate({scrollTop : 0}, 800);
        return false;
    });
    
 });

---

💡유의사항

스크롤 내리기 전 (100px 기준) 에는 display:none 처리되어 보이지 않는다.