반응형
https://blueshare.tistory.com/216
동적으로 움직이고 화면탑에서는 사라짐, 화면첫진입시 없다가 스크롤 내려면 생성 - 가장 이상적
맨위로 맨아래로 둘다 방법있음
위 두정보 참고해서 최종적용한 버젼: <body> 태그 제일 아래에 위치해야 함, 이거때문에 안되서 오래 삽질ㅠ
<script>
$(function(){//맨위로 버튼
//$("#btnTop").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100){$("#btnTop").fadeIn();}
else{$("#btnTop").fadeOut();}
});
});
//var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
$(function() {//맨아래로 버튼
//$('#btnBottom').show();
$(window).scroll(function(){
if($(this).scrollTop() >= $(window).height()){$("#btnBottom").fadeOut();}
else{$("#btnBottom").fadeIn();}
});
$("#btnBottom").click(function() {
$('html, body').animate({
scrollTop: $(document).height()
}, 400);
return false;
});
});
</script>
<a href="#" id="btnTop" style="display:none;position:fixed;bottom:130px;right:20px;z-index:9999" title="맨위로">
<img src="./images/ScrollToTop.png" width='50px' height='50px'/></a>
<a href="#" id="btnBottom" style="display:none;position:fixed;bottom:85px;right:20px;z-index:9999" title="맨위로">
<img src="./images/ScrollToBottom.png" width='50px' height='50px'/></a>
</body>
Book club 스킨에 있는 코드
이와 같이 footer에 고정되는 스타일, 스크롤함에 따라 동적으로 움직이지는 않음
<footer id="footer">
<div class="inner">
<a href="#" class="page-top">TOP</a>
</div>
</footer>#footer .page-top {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
border: 1px solid #eee;
border-radius: 50%;
background: #fff url(./images/ico_package.png) no-repeat -100px -200px;
text-indent: -999em;
}
#footer .page-top:focus,
#footer .page-top:hover {
background-color: #757575;
background-position-x: -150px;
}
/* Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio:1.5) {
#header .util .search:before,
#header .util .search button,
#footer .page-top,
.cover-thumbnail-3 button,
.cover-thumbnail-4 button,
.page-nav a strong:after,
.entry-content .protected_form h2:before,
.comment-list ul li .author-meta .control button,
.comment-form .secret input[type=checkbox]:checked+label:before,
.sidebar .social-channel ul li a,
.sidebar .tab-ui h2 a:before {
background-image: url(./images/ico_package_2x.png);
background-size: 200px auto;
}
.post-item.protected .thum:before {
background-image: url(./images/ico_package_2x.png);
background-size: 120px auto;
}
}반응형
'etc' 카테고리의 다른 글
| 공부할 것들과 사이드 프로젝트 아이디어 (0) | 2023.07.22 |
|---|---|
| tistory 댓글에 이미지추가하기 - 미넴스킨 사용 (0) | 2023.07.12 |
| tistory skin 편집 (0) | 2023.06.06 |
| [영상편집]프리미어 프로 - system compatibility report (0) | 2023.05.02 |
| 자기소개 (2) | 2022.09.16 |