FrontendJavascript

Javascript Scroll Top Bottom Move

JavaScript 스크롤 가장 위, 아래로 이동하기

웹사이트 개발시 푸터 하단에 Top버튼 클릭시 상단으로 이동하는 이벤트 핸들러에 적용된다.

body 스크롤 위로 이동

1
2
3
4
5
//Javascript
document.body.scrollTop = 0;

//jQuery
$('html, body').scrollTop(0);

div (overflow:scroll) 스크롤 가장 위로 이동

1
2
3
4
5
6
7
8
//Javascript
document.getElementById('mydiv').scrollTop = 0;

//jQuery
$("#mydiv").scrollTop(0);

//jQuery 스크롤 모션
$("#mydiv").stop().animate({scrollTop: 0}, 200);

ajax로 얻어온 데이터를 div 태그에 뿌려주다보면 넘쳐서 스크롤바가 생기는 경우가 많다.
가장 대표적인 예가 채팅 프로그램을 만들 때 가장 아래로 스크롤을 유지해야하는데, div에 내용이 추가되고 나서 아래의 자바스크립트를 사용하면 된다.

body 스크롤 가장 아래로 이동

1
2
3
4
5
//Javascript
document.body.scrollTop = document.body.scrollHeight;

//jQuery
$('html, body'').scrollTop($(document).height());

div (overflow:scroll) 스크롤 가장 아래로 이동

1
2
3
4
5
6
7
8
//Javascript
document.getElementById('mydiv').scrollTop = document.getElementById('mydiv').scrollHeight;

//jQuery
$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

//jQuery 스크롤 모션
$("#mydiv").stop().animate({scrollTop: $("#mydiv")[0].scrollHeight}, 200);

참조

공유하기