[jQuery] jQuery를 이용해 top btn 누르면 화면 상단으로 이동하기

 

 

See the Pen aos를 이용한 top버튼 만들기 by limhaneul2244 (@limhaneul2244) on CodePen.

 

$(document).ready(function(){

    $("#top_btn").click(function(){
        $("html,body").stop().animate({"scrollTop":0},1000); //html, body 태그 기점으로 n초 뒤 상단 이동
    });
    $(window).scroll(function(){
        let scroll = $(window).scrollTop();                  //윈도우창의 화면 높이 측정
        if(scroll >= 500){                                   // " ?? " 이 넘어갈 경우
            $("#top_btn").fadeIn('slow'); 
        } else {                                             // " ?? " 이 넘어가지 않을 경우
            $("#top_btn").fadeOut('slow'); 
        }
    });
});

 

또 다른 방법

<!-- top_btn -->
<aside id="top_btn">
  <a href="javascript:window.scrollTo({top:0, left:0, behavior:'smooth'})">
  	<span class="hidden">맨 위로 이동</span>
  </a>
</aside>

a태그에 javascript를 지정해 direct로 지정해줄 수도 있다. scroll을 사용하는 방법은 같다.

 

 

scrollTop을 이용한 jQuery tistory 내 다른 글 보기