많은 웹사이트들에서 글이 길어질 것을 대비하여 상단바 기능을 구현합니다. 이번 시간에는 간단하게 상단바 이동 기능을 알아보려고 합니다.
+ 두가지 강의를 준비하려고 합니다. 먼저는 순수하게 상단 이동 스크롤 버튼을 구현하는 것과 두 번째는 요즘 사이트들이 만드는 것처럼 몇몇 사진으로 자연스럽게 animate 되는 것을 실습을 통하여 만들어보려고 합니다.
주의사항 : 스크롤 이동 기능을 구현하려고 할때 자바스크립트보다 CSS의 영향이 더 크다고 생각합니다. 그래서 적절한 CSS숙지가 필요할 것 같습니다. (실제로 쓰는 자바스크립트 소스가 얼마 안 됨)
알아야 할 것
| window (인터넷 브라우저를 다루는 객체, document는 사이트 내부 조작이라면 이것은 외부라고 생각하면된다) (ex : 즐겨찾기 탭 추가 등등) |
|
| window.scrollTo(x,y) | (x,y)의 위치로 이동한다. (절대적) |
| window.scrollTo({top:0, left:0, behavior:smooth}) | left(x축위치), top(y축위치)를 특정 행동을 하여 이동한다 (behavior는 auto, smooth가 있는데 auto는 그냥 이동하는 것, smooth는 자연스럽게 넘어가는 효과다) |
| window.scrollBy(x,y) | (x,y)의 위치 만큼 이동한다. (상대적) |
사용방법
0. 안 움직이는 top 버튼 제작
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>fixbutton</title>
<style>
.goupbtn{
top: 90%;
left: 90%;
width: 50px;
height: 50px;
border-radius: 80%;
background-color: #ffffff;
border: red 3px solid;
position: fixed;
z-index: 2;
}
</style>
</head>
<body>
<input class="goupbtn" type="button" value="Top"></div>
</body>
</html>사실 소스코드만 두었을 뿐이지 매우 간단합니다. 위에서 설명한 position과 z-index만 알면 됩니다.
position는 속성들을 담는 그릇입니다. 여기서는 fixed를 사용하였는데 절대적인 위치(x, y) 값에 위치합니다.
z-index는 포토샵의 레이어와 같은 느낌이라 한 개만 할 때는 크지 않지만 여러 개 놓을 때는 사진 보이는 순서가 중요한 것처럼 처리해야 합니다. 그때 사용합니다.
1. 상단으로 이동하는 스크롤 구현하기
window.scrollTo(x,y)를 이용하여 상단 이동 스크롤을 구현해보았습니다. 0번의 예제에 버튼에다가 onclick을 이용하여 단한줄의 스크립트를 추가해보았습니다. (0,0)은 웹페이지에서 가장 위 가장 왼쪽을 상징합니다.
<!DOCTYPE html>
<!--border는 예제를 위해 넣은 거고 실제로 볼 것은 goupbtn 이거만 보시면됩니다.-->
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Topbtn1</title>
<style>
.border1{
border: red 2px solid;
height: 800px;
background-color: tomato;
}
.border2{
border: blue 3px solid;
height: 800px;
background-color: violet;
}
.goupbtn{
top: 90%;
left: 90%;
width: 50px;
height: 50px;
border-radius: 80%;
background-color: #ffffff;
border: red 3px solid;
position: fixed;
z-index: 2;
}
</style>
</head>
<body>
<div class="border1"></div>
<div class="border2"></div>
<input class="goupbtn" type="button" value="Top" onclick="clickme()"></div>
<script>
function clickme(){
window.scrollTo(0,0);
}
</script>
</body>
</html>See the Pen Top button ex1 by kmsbio (@kmsbio) on CodePen.
2. 애니메이션 효과로 올라가는 스크롤 구현하기
위의 사용 가능 범주를 크게 보면 사파리에서는 애니메이션 기능이 작동하지 못합니다. 참고하시면 될 것 같습니다.
1번의 예제에서 단 한 줄만 바꾸면 됩니다.
window.scrollTo({top:0, left:0, behavior:smooth})
여기서 behavior:smooth는 자연스러운 애니메이션 효과를 만들어 줍니다.
See the Pen Top button ex2 by kmsbio (@kmsbio) on CodePen.
+ (추가) 순수하게 html로만 위치 이동하는 방법
<a> 태그의 위치를 이용해서 위치 이동을 할 수 있는 방법이 있습니다.
우선 태그를 이용하는 것이라 코드가 꼬이면 어려워 비추천하는 방법이지만 이것도 있다 정도로 알면 될 것 같습니다.
<a href="#id">
id값을 이용하여 해당 위치를 찾는 방법입니다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Topbtn3</title>
<style>
.border1{
border: red 2px solid;
height: 800px;
background-color: tomato;
}
.border2{
border: blue 3px solid;
height: 800px;
background-color: violet;
}
.goupbtn{
top: 90%;
left: 90%;
width: 50px;
height: 50px;
border-radius: 80%;
background-color: #ffffff;
border: red 3px solid;
position: fixed;
z-index: 2;
}
</style>
</head>
<body>
<!--#top의 위치를 찾고 이동하는 방식-->
<div id=top>
<div class="border1"></div>
<div class="border2"></div>
</div>
<a href="#top"><input class="goupbtn" type="button" value="Top"></div></a>
</body>
</html>'컴퓨터 > JavaScript' 카테고리의 다른 글
| JavaScript (5) - 서버 시간을 가져오자 (XMLHttpRequest) (0) | 2023.03.16 |
|---|---|
| JavaScript (4) - FileReader를 이용하여 이미지 미리보기 구현 (0) | 2022.12.18 |
| JavaScript (3) - 텍스트를 인식하는 중복없는 뽑기제작 (0) | 2022.01.02 |
| JavaScript (1) - 자바스크립트를 이용하여 시계 구현하기 (0) | 2020.12.14 |