[jQuery] 제이쿼리로 최상단으로 부드럽게 스크롤 이동하기

 

 

 

    <button type="button" id="top_btn">
     <i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span>
    </button>
    <script>
    $(function() {
        $("#top_btn").on("click", function() {
            $("html, body").animate({scrollTop:0}, '500');
            return false;
        });
    });
    </script>

$("html, body").animate({scrollTop:0}, '500');

: 페이지의 상단으로 스크롤을 부드럽게 이동하는 애니메이션을 시작한다.

{scrollTop:0}는 스크롤의 Y 좌표를 0으로 이동시키는 것을 의미하며,

'500'은 애니메이션의 지속 시간을 밀리초 단위로 설정한다.

즉, 0.5초 동안 애니메이션이 진행된다.

 

return false;

: 클릭 이벤트 후에 기본 동작을 취소한다. 버튼 클릭 시 페이지의 스크롤 이동을 방지한다.

 

 

요약

: '상단으로' 버튼 클릭 시 페이지가 맨 위로 부드럽게 스크롤되는 효과를 구현하였다.

 

---

 

https://sorydory.tistory.com/entry/%E3%84%B1-21

[JavaScript] 간단하게 최상단으로 위치 이동하기 onclick사용

ㄴ> 자바스크립트로 이동