300x250
반응형
안녕하세요. J4J입니다.
이번 포스팅은 특정 위치로 부드럽게 스크롤 이동시키는 방법에 대해 적어보는 시간을 가져보려고 합니다.
방법 1: scrollBy
첫 번째 방법은 scrollBy를 이용하는 방법입니다.
간단한 예시로 버튼을 누르게 되면 원하는 위치로 부드럽게 스크롤이 이동되는 코드를 짜 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.section {
height: 500px;
}
</style>
</head>
<body>
<div>
<button id='button1'>Section1</button>
</div>
<section class='section'>
<span>페이지를 내리기 위한 구간 ...</span>
</section>
<section class='section' id='section1'>
<h2>Section1 Title</h2>
<span>Section1 Description ...</span>
</section>
</body>
<script>
const button1 = document.getElementById('button1');
const section1 = document.getElementById('section1');
button1.addEventListener('click', () => {
window.scrollBy({top: section1.getBoundingClientRect().top, behavior: 'smooth'});
});
</script>
</html>
위의 코드처럼 button1을 클릭할 때 window.scrollBy를 이용하여 스크롤이 부드럽게 이동될 수 있도록 처리해줄 수 있습니다.
해당 코드를 실행하면 다음과 같이 부드럽게 이동되는 것을 확인할 수 있습니다.
반응형
방법 2: scrollIntoView
두 번째 방법은 scrollIntoView를 이용하는 방법입니다.
위와 동일하게 실행될 수 있도록 scrollIntoView를 이용하여 위의 코드를 수정해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.section {
height: 500px;
}
</style>
</head>
<body>
<div>
<button id='button1'>Section1</button>
</div>
<section class='section'>
<span>페이지를 내리기 위한 구간 ...</span>
</section>
<section class='section' id='section1'>
<h2>Section1 Title</h2>
<span>Section1 Description ...</span>
</section>
</body>
<script>
const button1 = document.getElementById('button1');
const section1 = document.getElementById('section1');
button1.addEventListener('click', () => {
section1.scrollIntoView({ behavior: 'smooth' });
});
</script>
</html>
scrollBy대신 scrollIntoView를 이용해도 동일하게 실행되는 것을 확인할 수 있습니다.
다만 정확한 이유는 모르겠지만 scrollIntoView는 계속 클릭하다 보면 멈칫멈칫하는 상황들이 자주 발생됩니다.
그렇기 때문에 저는 개인적으로 scrollBy 사용을 추천드립니다.
이상으로 특정 위치로 부드럽게 스크롤 이동시키는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.
728x90
반응형
'HTML, CSS > CSS' 카테고리의 다른 글
| [CSS] 메뉴 밑줄 슬라이드 CSS (0) | 2021.12.30 |
|---|---|
| [CSS] 터치 슬라이드 CSS (0) | 2021.09.22 |
| [CSS] 슬라이드 배너 CSS (7) | 2021.09.22 |
| [CSS] 책장 넘기는 CSS (0) | 2021.08.13 |
| [CSS] 타이핑 치는 효과를 주는 CSS (0) | 2021.08.09 |
댓글