jquery 를 이용하여 화면 맨위로 자연스럽게 올라가는 기능을 구현해 보겠습니다.
스크롤을 많이 내리면 맨위로 한번에 올라가는 이벤트가 필요합니다.
한번에 화면 최상단으로 올라가는 방법도 있지만 animation을 사용하여 자연스럽게 올라가는 기능을 구현해 보겠습니다.
기능 요약
- 스크롤의 위치에 따라서 맨위로 올라가는 버튼을 나타내거나 사라지도록 한다.
- 맨위로 올라가는 버튼을 클릭하면 자연스럽게 화면 최상단으로 이동한다.
jquery import는 필수입니다.
1. Html A 태그를 만듭니다.
버튼도 관계없습니다.
필자는 A 태그로 작성하였고 설명은 버튼으로 칭하겠습니다.
|
1
|
<a id="MOVE_TOP_BTN" href="#">TOP</a>
|
cs |
2. CSS style을 작성합니다.
|
1
2
3
4
5
6
7
8
9
|
<style>
a#MOVE_TOP_BTN {
position: fixed;
right: 2%;
bottom: 50px;
display: none;
z-index: 999;
}
</style>
|
cs |
3# : 화면에 고정
4#, 5# : 버튼의 위치 설정
6# : 화면에서 숨김
7# : 다른 태그들보다 위로 오도록 설정(z-index 가 설정된 다른 태그가 있다면 그 태그보다 커야 함)
3. script 를 작성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#MOVE_TOP_BTN').fadeIn();
} else {
$('#MOVE_TOP_BTN').fadeOut();
}
});
$("#MOVE_TOP_BTN").click(function() {
$('html, body').animate({
scrollTop : 0
}, 400);
return false;
});
});
</script>
|
cs |
3# : scroll 함수를 이용
4# ~ 8# : 스크롤 위치에 따라 화면에서 맨위로 올라가는 버튼을 나타내고, 사라지도록 설정
11# : 버튼 클릭 이벤트
12# : animation 을 걸어서 화면 맨위로 이동하도록 설정
LIST
'WEBD > PHP' 카테고리의 다른 글
| 아이프레임 iframe height 높이 자동조절 방법 (0) | 2022.11.05 |
|---|---|
| xml 파싱 ( snoopy 스누피를 이용한 것과 파일을 이용하는 것) (0) | 2020.10.02 |
| 파일 확장자 구하기 여러가지 방법 (0) | 2020.10.02 |
| php를 활용하여 리눅스 계정 만들기 (0) | 2020.10.02 |
| facebook sharer를 이용할 경우 부가 메타데이터 넣는 방법 (0) | 2020.10.02 |