[jQuery] IE에서 scrollTop animate 효과 동작하지 않는 문제 해결 방법

[jQuery] IE에서 scrollTop animate 효과 동작하지 않는 문제 해결 방법

흔히 버튼을 클릭하여 스크롤을 부드럽게 이동시키는 효과는 animate를 이용하여 scrollTop 속성을 변화시킵니다.

이때 IE에서는 코드가 동작하지 않는 경우가 있습니다. 아래 코드는 IE에서 동작하지 않습니다.

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

scrollTop 속성에 0을 부여해 문서를 최상단으로 이동시키는 스크립트 입니다. 크롬이나 파이어폭스에서는 동작하지만 IE에서는 동작하지 않습니다.

 

그렇다면 이 코드를 동작하도록 수정해보겠습니다.

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

크게 바뀐 부분은 없습니다. 셀렉터 부분이 “html body”에서 “html, body”로 변경된 것 뿐입니다. IE에서는 “html body” 셀렉터를 인식하지 못하는 문제를 가지고 있는 것으로 보입니다. 더 정확하게는 body 셀렉터를 인식하지 못합니다. 반대로 크롬에서는 html 셀렉터를 지정하지 못합니다.

따라서 html안에 body를 뜻하는 “html body”가 아닌 html과 body를 뜻하는 “html, body”로 셀렉터를 지정해주셔야 대부분의 브라우저를 커버할 수 있습니다.

%d 블로거가 이것을 좋아합니다: