728x90
CSS / Javascript 메뉴 클릭시 화면 스크롤 부드럽게 이동하기
순수 CSS와 순수 자바스크립트만을 사용하여 구현하였다.
버튼은 간단하게 네모 모양으로 구성하였으며,
메뉴 클릭시 화면 스크롤 이동에 대한 로직은
아래 코드에 모두 구현되어있다.
구동 로직
1. 첫 화면에 초록색 동그란 버튼이 생성되는데 클릭시
가장 하단의 태그에 스크롤이 자동으로 이동된다.
2. 스크롤이 일정범위를 지나면 위쪽의 초록색 버튼이 사라지고
하단에서 최상단으로 한번에 이동할수 있는 오렌지색 버튼이 자동으로 생성된다.
3. 오렌지색 동그란 버튼 클릭시 자동으로 화면의 최상단에 있는
태그 위치로 스크롤을 이동시킨다.
샘플 예제
<!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>CSS / Javascript Auto Scroll Example</title>
<style>
/* 상단 태그 */
.container {
height : 400vh;
background-color: lightgreen;
}
/* 하단 태그 */
.container2 {
height: 100vh;
background-color: lightpink;
}
/* 위쪽 화살표 */
.arrow-up {
position : fixed;
bottom : 30px;
right : 30px;
background-color : tomato;
width :50px;
height : 50px;
border-radius: 50%;
opacity: 0;
transition : opacity 300ms ease;
pointer-events: none;
cursor: pointer;
}
.arrow-up.visible {
opacity: 1;
pointer-events: auto;
}
/* 아래쪽 화살표 */
.arrow-down {
position : fixed;
top : 30px;
right : 30px;
background-color : lightseagreen;
width :50px;
height : 50px;
border-radius: 50%;
opacity: 0;
transition : opacity 300ms ease;
pointer-events: none;
cursor: pointer;
}
.arrow-down.visible {
opacity: 1;
pointer-events: auto;
}
</style>
</head>
<body>
<button class="arrow-down visible"></button>
<div class="container"></div>
<button class="arrow-up"></button>
<div class="container2"></div>
<script defer>
document.addEventListener('scroll',e=>{
if(window.scrollY > 500){ //스크롤 위치 500 높을시
//상단 이동 버튼 생성(토마토색)
document.querySelector('.arrow-up').classList.add('visible');
//하단 이동 버튼 삭제(초록색)
document.querySelector('.arrow-down').classList.remove('visible');
}
else { //스크롤 위치 500 아래일시
//상단 이동 버튼 삭제(토마토색)
document.querySelector('.arrow-up').classList.remove('visible');
//하단 이동 버튼 생성(초록색)
document.querySelector('.arrow-down').classList.add('visible');
}
})
//오렌지색 버튼 클릭시, 최상단 태그로 이동
document.querySelector('.arrow-up').addEventListener('click',e=>{
document.querySelector('.container').scrollIntoView({behavior:'smooth'});
});
//초록색 버튼 클릭시, 최하단 태그로 이동
document.querySelector('.arrow-down').addEventListener('click',e=>{
document.querySelector('.container2').scrollIntoView({behavior : 'smooth'});
});
</script>
</body>
</html>출력 결과
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 페이스북 아이디로 간편 로그인 기능 구현 Facebook Login (2) | 2021.05.14 |
|---|---|
| [Javascript] 자바스크립트 엘리먼트 선택자 querySelector, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName (0) | 2021.04.27 |
| [Javascript] 엘리먼트 위치로 스크롤 이동 scrollIntoView() (0) | 2021.04.15 |
| [Javascript] cookie 사용하기 (0) | 2021.04.01 |
| [Javascript] some 배열, 객체 내 원하는 값 있는지 확인 (0) | 2021.04.01 |
댓글