728x90
Javascript 엘리먼트 위치로 스크롤 이동 엘리먼트.scrollIntoView()
scrollIntoView()는 보통 메뉴바에서 많이 쓰이는데
싱글페이지 앱에서 메뉴 버튼 클릭시 해당되는
위치로 스크롤이 이동되는 기능을 수행한다.
기본 골격
element.scrollIntoView();
//괄호안에 {behavior : 'smooth'} 코드 추가시
//스크롤 이동이 ease-in-out과 같이 부드러워진다샘플코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Javascript scrollIntoView Example</title>
<style>
.menu {
position : fixed;
top 0;
width : 100%;
display :flex;
list-style : none;
justify-content : space-around;
align-items : center;
padding : 20px 0;
background-color: aqua;
padding-left : 0;
}
.menu li {
cursor: pointer;
}
.content {
height: 50vh;
}
#section1 {
background : orange;
}
#section2 {
background : green;
}
#section3 {
background : blue;
}
#section4 {
background : yellow;
}
</style>
</head>
<body>
<ul class="menu">
<li data-link="#section1">menu1</li>
<li data-link="#section2">menu2</li>
<li data-link="#section3">menu3</li>
<li data-link="#section4">menu4</li>
</ul>
<div class="container">
<div id="section1" class="content"></div>
<div id="section2" class="content"></div>
<div id="section3" class="content"></div>
<div id="section4" class="content"></div>
</div>
<script>
document.querySelector('.menu').addEventListener('click',e=>{
if(e.target.nodeName === 'LI'){
let id_value = e.target.dataset.link;
document.querySelector(id_value).scrollIntoView({behavior : 'smooth'});
}
});
</script>
</body>
</html>출력 결과
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트 엘리먼트 선택자 querySelector, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName (0) | 2021.04.27 |
|---|---|
| [CSS / Javascript] 메뉴 클릭시 화면 스크롤 이동 (0) | 2021.04.17 |
| [Javascript] cookie 사용하기 (0) | 2021.04.01 |
| [Javascript] some 배열, 객체 내 원하는 값 있는지 확인 (0) | 2021.04.01 |
| [Javascript] 스크롤 이벤트 (Scroll Event) (0) | 2021.03.31 |
댓글