상단 스크롤 버튼 업그레이드


/templates/taeho/base.html line 305~
[code]
// 상단 스크롤 버튼
$(function() {
$("#top_btn").on("click", function() {
$("html, body").animate({scrollTop:0}, '500');
return false;
});
});
=>
// 상단 스크롤 버튼
jQuery(function($) {
var $elem = $("html, body");
var where = 0;
$("#top_btn").on("click", function() {
var windowHeight = $(document).height() - $(window).height();
var winhalf = windowHeight * 0.5;
if ($elem.scrollTop() < winhalf) {
$elem.animate({ scrollTop: $elem.prop("scrollHeight") }, 400);
where = 1;
} else {
$elem.animate({ scrollTop: 0 }, 400);
where = 0;
}
});
$(document).ready(function() {
$(window).scroll(function() {
var windowHeight = $(document).height() - $(window).height();
var winhalf = windowHeight * 0.5;
var scrollPos = $(document).scrollTop();
var scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
var $buttonTop = $("#top_btn");
if (scrollPos > winhalf) {
$buttonTop.css({
"border-color": "red",
"line-height": "15px",
"color": "red"
}).html("<i class='fa fa-arrow-up' aria-hidden='true'></i>");
} else {
$buttonTop.css({
"border-color": "blue",
"line-height": "15px",
"color": "blue"
}).html("<i class='fa fa-arrow-down' aria-hidden='true'></i>");
}
if ($("#scroll_percentage").length === 0) {
$("<p id=\'scroll_percentage\'></p>").appendTo($buttonTop);
}
$("#scroll_percentage").text(Math.round(scrollPercent));
});
});
});
[/code]
댓글 2개
적용해보니 아주 잘 작동하네요. 감사합니다.
@sinbi님 감사 합니다.
게시판 목록
그누보드6 팁자료실
그누보드6 실서비스를 위한 웹서버 설정
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 18 | 1년 전 | 1151 | ||
| 17 | 1년 전 | 800 | ||
| 16 |
네이비스택
|
1년 전 | 1687 | |
| 15 | 1년 전 | 632 | ||
| 14 | 1년 전 | 1053 | ||
| 13 | 1년 전 | 1309 | ||
| 12 | 1년 전 | 939 | ||
| 11 | 1년 전 | 1263 | ||
| 10 | 1년 전 | 1101 | ||
| 9 | 1년 전 | 1301 | ||
| 8 | 1년 전 | 890 | ||
| 7 | 1년 전 | 1994 | ||
| 6 | 1년 전 | 1800 | ||
| 5 | 1년 전 | 1056 | ||
| 4 | 1년 전 | 560 | ||
| 3 | 1년 전 | 771 | ||
| 2 | 1년 전 | 2321 | ||
| 1 | 1년 전 | 2951 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기