728x90
스크롤 이동
scrollTo 는 특정 위치로 이동시켜주는 함수다.
scrollTo(가로, 세로)
지금 네이버를 켜서 콘솔창에 찍어보면 바로 이동한다.
window.scrollTo(0, 3000)
이 함수는 더 자세히 적을수도있는데
window.scrollTo({top: 3000, behavior:'smooth'})
이렇게도 쓸 수 있다.
옵션인 behavior은 어떻게 이동할지에 대한 옵션으로,
- smooth: 스크롤이 부드럽게 움직인다.
- instant : 스크롤이 바로 해당지점으로 움직인다.
- auto : 기본 움직임
전체 브라우저 스크롤과 DIV내의 스크롤
window.scrollTo는 전체 브라우저의 스크롤을 조절하고,
div.scrollTo는 해당 요소 내에서만 스크롤을 조절한다.
ex) document.getElementById("testDiv").scrollTo(0, 3000);
이때 무작성 아무 사이트에서 id가 있는 div태그를 하고 scrollTo를 하면 이동이 안될거다.
scrollTo가 동작되는 기본 조건은 해당 태그내부에 overflow : scroll이나 auto가 있어서 스크롤이 가능해야한다.
따라서 전체 화면안에 특정영역에 스크롤이 잇어서 이동시키고 싶을때는
DIV.scrollTo()로 사용하면된다.
**여기서 DIV는 예시
특정 태그의 위치로 이동하기
어떤 버튼을 클릭했을때 특정 태그의 위치로 이동하고싶다면, scrollIntoView()를 쓰면된다.
<div id="div_best"></div>let divTest = document.getElementById("div_best")
divTest.scrollIntoView({behavior : 'smooth'})
728x90
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| JavaScript) 객체 키 이름으로 정렬. Object Key 값으로 정렬 (0) | 2023.12.28 |
|---|---|
| JavaScript) 객체 키 이름 변경하기 (0) | 2023.12.27 |
| JavaScript) 자바스크립트 객체 내 같은 값 찾기, 추출하기. 특정 값 추출하기, 객체 특정 값 기준으로 정렬하기. 객체 정렬 (0) | 2023.12.07 |
| JavaScript) 자바스크립트 리스트(배열), 문자열 포함 여부 확인 (0) | 2023.10.18 |
| JavaScript) 객체(Object) 내 배열에서 중복 값 찾아서 제거하기 (0) | 2023.08.11 |