Written by java-style
on 2021-09-12

119. (javascript/자바스크립트) scrollTop 사용해 특정 객체 top...

728x90

반응형

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : javascript

[자바스크립트 소스코드]

/* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. document.getElementById : 특정 객체 태그 아이디를 지정합니다 3. scrollTop : 특정 태그 스크롤 위치를 지정합니다 */ /* [html 최초 로드 및 이벤트 상시 대기 실시] */ window.onload = function() { console.log(""); console.log("[window onload] : [start]"); console.log(""); }; /* [top 스크롤 이벤트 함수 정의] */ function top_scroll_move(){ console.log(""); console.log("[top_scroll_move] : [start]"); console.log(""); // 스크롤을 이동할 레이아웃 아이디 지정 var tagId = document.getElementById("content_container"); // [맨 상단으로 스크롤 이동 실시] tagId.scrollTop = 0; }; /* [bottom 스크롤 이벤트 함수 정의] */ function bottom_scroll_move(){ console.log(""); console.log("[bottom_scroll_move] : [start]"); console.log(""); // 스크롤을 이동할 레이아웃 아이디 지정 var tagId = document.getElementById("content_container"); // [맨 하단으로 스크롤 이동 실시] tagId.scrollTop = tagId.scrollHeight; };

[BODY 소스코드]

TOP 이동 BOTTOM 이동 ONE TWO THREE

[결과 출력]

[TOP 스크롤 이동 실시]

[BOTTOM 스크롤 이동 실시]

[요약 설명]

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. document.getElementById : 특정 객체 태그 아이디를 지정합니다

3. scrollTop : 특정 태그 스크롤 위치를 지정합니다

728x90

반응형

from http://kkh0977.tistory.com/1206 by ccl(A) rewrite - 2021-09-12 10:27:31

Top