반응형
스크롤 이동
해당 페이지 내에서 최상단으로 스크롤을 이동시키는 방법에 대해 알아보자.
－ 윈도우 스크롤 이용하기
window.scrollTo(0, 1000);
－ 애니메이션 효과 사용하기
window.scrollTo({
top: 100,
left: 100,
behavior: "smooth",
});
－ 응용하기
const scrollTop = (position = 0) => {
try {
document.body.scroll({
behavior: 'smooth',
left: 0,
top: parseInt(position)
});
} catch (e) {
console.log(e);
}
}
자주 사용하는 경우 함수로 작성해두고, 해당 함수를 호출해서 사용하면 된다.
Window: scrollTo() method - Web APIs | MDN
Window.scrollTo() scrolls to a particular set of coordinates in the document.
developer.mozilla.org
반응형
'공부 이야기' 카테고리의 다른 글
| [SQL] JOIN 문법 알아보기 (INNER JOIN, LEFT JOIN, RIGHT JOIN) (0) | 2023.10.11 |
|---|---|
| [JavsScript] forEach문 사용하는 방법 (배열) (0) | 2023.10.10 |
| [JavaScript] 이름 유효성 검사하기 (정규식 표현) (0) | 2023.08.30 |
| [JavaScript] 휴대폰 번호 유효성 검사하기 (정규식 표현) (0) | 2023.08.29 |
| [JavaScript] 배열에서 무작위로 값 추출하는 방법 ! (0) | 2021.09.03 |
SkyBaby
부부가 운영하는 정보 공유 공간입니다. 다양한 일상, 요리, 맛집탐방, 게임, 공부 등의 정보를 담고 있습니다.