윈도우 스크롤(scroll) 예제

소스 작용 
<INPUT type=button value="절대위치로 화면굴림"
  onClick="window.scrollTo(700,200)">
 
<INPUT type=button value="상대위치로 화면굴림"
  onClick="window.scrollBy(50,50);showit()">
 
<DIV style="background:fff;padding:5;border:solid 1 blue;text-align:center">
<FORM name="testForm">
<SMALL>스크롤 방식</SMALL><BR>
절대<INPUT type="radio" name="check" checked>
상대<INPUT type="radio" name="check">,
가로 <INPUT type="text" name="x" value="100" size=3>,
세로 <INPUT type="text" name="y" value="100" size=3>
</DIV>
<INPUT type=button value="지정위치로 화면굴림"
  onClick="if (testForm.check[0].checked)
    window.scrollTo(this.form.x.value,this.form.y.value);
  else if (testForm.check[1].checked)
   window.scrollBy(this.form.x.value,this.form.y.value)">
</FORM>
스크롤 방식
절대 상대
가로 세로 

<SCRIPT>
document.write('화면굴림 수평 좌표=<SPAN id=pTop>''+
  window.document.body.scrollTop+
  '</SPAN><BR>화면굴림 수직 좌표=<SPAN id=pLeft>'+
  window.document.body.scrollLeft+'</SPAN>')
  
document.write('화면굴림 높이=<SPAN id=pHeight>'+
  window.document.body.scrollHeight+
  '</SPAN><br>화면굴림 너비=<SPAN id=pWidth>'+
  window.document.body.scrollWidth+'</SPAN>')
</SCRIPT>
 
<INPUT type=button value="새로고침" onClick="window.location.reload()">

작동하고 새로고침해서 보라. 스크롤(scroll)은 원위치로 환원된다.


<HEAD>
<SCRIPT Language="Javascript">
function showit(){
  pTop.innerHTML=window.document.body.scrollTop;
  pLeft.innerHTML=window.document.body.scrollLeft;
  pHeight.innerHTML=window.document.body.scrollHeight;
  pWidth.innerHTML=window.document.body.scrollWidth;
}
</SCRIPT>
</HEAD>
맨위로