[JS] Scroll Down, 스크롤 제일 하단으로 움직이기 animate()

animate()

배경

클릭 할 때마다 하단에 새로운 입력폼이 생겨나도록 하고 싶었다.

그런데 폼이 생기긴 하는데 스크롤만 생기고 밑으로 내려가지 않아서 생겼는지 알 수가 없었다.

스크롤을 밑으로 내려주는 js를 쓰니, 너무 순식간에 움직여서 인지 하기도 힘들었다.

 

구현

따라서 animate를 이용한 스크롤 이동 이벤트

$("html, body").animate({ scrollTop: $(document).height() }, 500);

어디든 상관없이 해당 코드를 쓰면 될 것 같다.

 

따라서 내가 사용하게 된 코드는

// 클릭시 스크롤 제일 밑으로
$(".scrollDown").click(function(){
    $("html, body").animate({ scrollTop: $(document).height() }, 500);
});

클래스를 주어서 이렇게 사용하였다.

 

 

animate에 관한 설명

https://api.jquery.com/animate/

.animate() | jQuery API Documentation

 

Animate 속성

.animate( properties [, duration ] [, easing ] [, complete ] )

라는 설정 설명이 있는데 duration은 기본값이 400이어서 쓰지 않아도 400으로 작동한다.

이외에 easing이라는 속성이 있는데 아래 사이트에서 실험해 볼 수 있다.

많은 기능이 있어서 재미있다.

 

https://api.jqueryui.com/easings/

Easings | jQuery UI API Documentation

complete는 완료시 실행할 function을 작성할 수 있다.