반응형
오늘은 버튼 클릭시 페이지 맨위로 이동하는 방법을 소개합니다.
먼저 jquery에 scrollTop() 이라는 메소드가 있는데요,
scrolltop은 현재 페이지의 높이 위치 라고 생각 하시면 쉽게 이해할 수 있습니다.
버튼을 클릭했을시 scrolltop을 0으로 주어서 맨위로 가게하는 방식입니다.
1. <head> 사이에 jquery 라이브러리 삽입
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>jquery 라이브러리는 넣어줍니다.
2.html 코딩 , css
.gotop{width:200px;height:40px;line-height:40px;display:inline-block;margin-right:10px;background:blue;text-align:center;color:#fff;}
.gotop2{width:200px;height:40px;line-height:40px;display:inline-block;background:blue;text-align:center;color:#fff;}<div style="height:800px;">맨위입니다</div>
<div>
<p class="gotop">맨위로 부드럽게 이동</p>
<p class="gotop2">맨위로 곧바로 이동</p>
</div>css는 버튼 2개에 대한 것만 적용을 했고, 버튼과 맨위의 차이를 두기위해서 800px만큼의 height를 잡아 주었습니다.
3. script부분
<script>
$(document).ready(function() {
$('.gotop').bind('click', function() {
$('html, body').animate({scrollTop: '0'}, 680);
});
// 애니메이션 효과로 자연스럽게 이동됨, 0.68초
$('.gotop2').on('click', function() {
$('html').scrollTop('0');
});
// 애니메이션 효과없이 즉시 해당 위치 0 지점으로 이동함
});
</script>
스크립트 넣어주고 애니메이션 속도를 빠르거나 느리게 하려면 숫자를 변경 해주면 된다.
반응형
'Jquery, Javascript' 카테고리의 다른 글
| [Jquery] 반응형 웹에서 jquery 다르게 불러오는 방법 (0) | 2022.11.11 |
|---|---|
| [Jquery] 제이쿼리로 css 적용하기 (0) | 2022.11.08 |
| [Jquery] Bxslider 사용해서 쉽게 슬라이드 사용하기 (0) | 2022.09.20 |
| [Jquery] datepicker 사용 제이쿼리로 달력 입력 방법 (1) | 2022.09.01 |
| [Jquery] 이미지 떨림효과 주기 (2) | 2022.08.25 |
댓글