간단한 스크롤 진행률 표시기 구현하기 2
<button id="scrollToTopBtn">0%</button>
<style type="text/css">
#scrollToTopBtn { position:fixed; bottom:20px; right:20px; padding:5px; font-size:11px; background-color:#E30613; color:white; border:none; border-radius:5px; cursor:pointer; opacity:0; visibility:hidden; transition:opacity 0.5s, visibility 0.5s; }
#scrollToTopBtn:hover { background-color:#FF000E; }
#scrollToTopBtn.show { opacity:1; visibility:visible; }
</style>
<script type="text/javascript">
$(document).ready(function() {
var $window = $(window);
var $scrollToTopBtn = $('#scrollToTopBtn');
var $document = $(document);
$window.scroll(function() {
var scrollPercent = Math.round($window.scrollTop() / ($document.height() - $window.height()) * 100);
$scrollToTopBtn.text(scrollPercent + '%');
if($window.scrollTop() > 200){
$scrollToTopBtn.addClass('show');
}else{
$scrollToTopBtn.removeClass('show');
}
});
$scrollToTopBtn.click(function(){
$('html, body').animate({ scrollTop: 0 }, 'slow');
});
});
</script>
우측에 위로 가기 버튼과 동일 하지만 퍼센트로 표시를 해주고
버튼을 누르게 되면 상단으로 이동되는 스크립트 입니다.
댓글 2개
감사합니다.
감사합니다.
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5216 | 2년 전 | 950 | |||
| 5215 | 2년 전 | 1085 | |||
| 5214 | 2년 전 | 725 | |||
| 5213 | PHP |
swallow
|
2년 전 | 670 | |
| 5212 | PHP |
swallow
|
2년 전 | 1694 | |
| 5211 | PHP |
swallow
|
2년 전 | 1457 | |
| 5210 | PHP |
swallow
|
2년 전 | 2142 | |
| 5209 | PHP | 2년 전 | 692 | ||
| 5208 | JavaScript |
swallow
|
2년 전 | 833 | |
| 5207 | JavaScript |
swallow
|
2년 전 | 682 | |
| 5206 | JavaScript |
swallow
|
2년 전 | 605 | |
| 5205 | PHP |
|
2년 전 | 697 | |
| 5204 | 기타 |
techstar
|
2년 전 | 749 | |
| 5203 | JavaScript |
swallow
|
2년 전 | 576 | |
| 5202 | JavaScript |
swallow
|
2년 전 | 604 | |
| 5201 | JavaScript |
swallow
|
2년 전 | 670 | |
| 5200 | JavaScript |
swallow
|
2년 전 | 858 | |
| 5199 | JavaScript | 2년 전 | 619 | ||
| 5198 | 기타 |
swallow
|
2년 전 | 651 | |
| 5197 | PHP |
swallow
|
2년 전 | 731 | |
| 5196 | JavaScript |
swallow
|
2년 전 | 598 | |
| 5195 | PHP |
swallow
|
2년 전 | 2051 | |
| 5194 | PHP |
swallow
|
2년 전 | 612 | |
| 5193 | 기타 |
swallow
|
2년 전 | 663 | |
| 5192 | MySQL |
swallow
|
2년 전 | 1382 | |
| 5191 | JavaScript |
swallow
|
2년 전 | 1071 | |
| 5190 | PHP |
swallow
|
2년 전 | 1925 | |
| 5189 | MySQL |
swallow
|
2년 전 | 6184 | |
| 5188 | node.js |
swallow
|
2년 전 | 1041 | |
| 5187 | node.js |
swallow
|
2년 전 | 789 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기