• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Window] JS - scrollBy() 메서드 ★ - 스크롤 이동 (※ 지정 픽셀 길이 만큼 이동 = scrollBy메서드 = 스크롤바이메서드)

목차
  1. scrollBy() 예제 - 스크롤 이동
  2. scrollBy() 정의
  3. scrollBy() 구문
  4. scrollBy() 예제 - 스크롤 이동 (down/up/right/left)

 

scrollBy() 예제 - 스크롤 이동 

 

<style>

body {width:750px ;}

button {position: fixed;}

</style>


<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 + 서버관리 + HTML CSS JS JQ PHP SQL BS</p>


<button onclick="scrollWin()">클릭</button><br><br>


<script>

function scrollWin() {

  window.scrollBy(100, 0);

}

</script>

 

결과보기

※ scrollWin 버튼 클릭할 때마다 해당 길이만큼 계속 이동.

 

scrollBy() 정의

 

지정된 픽셀 수만큼 문서를 스크롤 이동.

 


 

1.

  • 윈도우창 스크롤바 visible 속성을 true로 설정해야 함.
  • Top 버튼 만들 때 유용. 

 

2.

모든 브라우저 지원.

 

 

scrollBy() 구문

 

window.scrollBy(xnum, ynum)

 


[매개변수] 

 

xnum

필수. 가로 이동 픽셀수

  • 양수 : 오른쪽으로 이동
  • 음수 : 왼쪽으로 이동 

 

ynum

필수. 세로 이동 픽셀수

  • 양수 : 아래로 이동
  • 음수 : 위로 이동

 


[반환값]

 

따로 없음.

 

 

scrollBy() 예제 - 스크롤 이동 (down/up/right/left)

 

<style>

body {height: 5000px; width:750px ;}

.btn {position: fixed;}

</style>


<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 + 서버관리 + HTML CSS JS JQ PHP SQL BS</p>


<div class='btn'>

    <button onclick="scrollWin(0, 50)">Scroll down</button>

    <button onclick="scrollWin(0, -50)">Scroll up</button>

    <button onclick="scrollWin(100, 0)">Scroll right</button>

    <button onclick="scrollWin(-100, 0)">Scroll left</button>

</div>                                                


<script>

function scrollWin(x, y) {

  window.scrollBy(x, y);

}

</script>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012