728x90
반응형
200px 이상 스크롤을 내리면 우측 하단에 버튼이 나타나며, 버튼 클릭 시 스크롤이 부드럽게 맨 위로 올라가는 코드입니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
2. HTML
<button type="button" class="btn_top">맨위로</button>
3. CSS
.btn_top { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; background: #0026dd; border: 0; border-radius: 50%; color: #fff; }
4.. jQuery
$(function() {
$(window).scroll(function() {
var scrollPosition = $(this).scrollTop();
if (scrollPosition > 200) {
$(".btn_top").fadeIn();
} else {
$(".btn_top").fadeOut();
}
});
$(".btn_top").click(function() {
$("html, body").animate({ scrollTop: 0 }, 100);
return false;
});
});
728x90