728x90
300x250
SMALL
스크롤 하면 생성되는 top버튼 jQuery 플러그인으로 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll to Top Button</title>
<style>
/* 버튼 숨기기 */
#scrollButton {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
cursor: pointer;
border: none;
border-radius: 5px;
}
.box{
height: 1000px;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 스크롤 버튼 -->
<button id="scrollButton">Scroll to Top</button>
</body>
</html>
script
(function($) {
$.fn.scrollToTopButton = function() {
var $button = this;
// 버튼 클릭 시 페이지 상단으로 스크롤
$button.on('click', function() {
$('html, body').animate({scrollTop: 0}, 500);
});
// 문서의 스크롤 위치를 감지하여 버튼 표시/숨김 처리
$(document).scroll(function() {
if ($(this).scrollTop() > 200) {
$button.fadeIn();
} else {
$button.fadeOut();
}
});
return this; // jQuery 체이닝을 위해 자기 자신을 반환
};
})(jQuery);
$(document).ready(function() {
$('#scrollButton').scrollToTopButton();
});728x90
반응형
LIST
'javaScript > jQuery' 카테고리의 다른 글
| 클래스 기반 플러그인 문법 구조 (1) | 2023.10.17 |
|---|---|
| 선택한 노드 스타일 변경 (1) | 2023.10.10 |
| jQuery 플러그인 구조 (0) | 2023.10.05 |
| jQuery 유틸리티와 플러그인의 차이 (0) | 2023.10.03 |
| 3자리 수마다 콤마 추가 하는 jQuery 유틸리티 (0) | 2023.10.02 |
댓글