흔히 버튼을 클릭하여 스크롤을 부드럽게 이동시키는 효과는 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”로 셀렉터를 지정해주셔야 대부분의 브라우저를 커버할 수 있습니다.