상단, 하단 스크롤 버튼
2016. 8. 8. 17:28ㆍ웹랩/JavaScript
반응형
$(function(){
$("#top_btn .scroll-top").on("click",function(e){
e.preventDefault();
$("html, body").animate({scrollTop:0}, 100);
return false;
});
$("#top_btn .scroll-center").on("click",function(e){
e.preventDefault();
var middle_pos = $("body").offset().top - ( $(window).height() - $("body").outerHeight(true) ) / 2;
$("html, body").animate({scrollTop:middle_pos}, 100);
return false;
});
$("#top_btn .scroll-bottom").on("click",function(e){
e.preventDefault();
var scrollBottom = $("html,body").scrollTop + $("html,body").height();
$("html, body").animate({scrollTop:$(document).height()}, 300);
return false;
});
});
<div id="top_btn">
<div class="top_btn_wp">
<a href="#" title="상단으로" class="scroll-top">상단으로</a>
<a href="#" title="중간으로" class="scroll-center">중간으로</a>
<a href="#" title="하단으로" class="scroll-bottom">하단으로</a>
</div>
</div>
#top_btn{position:fixed;bottom:170px;left:-20px;width:100%;z-index:999}
#top_btn .top_btn_wp{width:90%;margin:0 auto;position:relative}
#top_btn .top_btn_wp a{position:absolute;right:0}
#top_btn .top_btn_wp a.scroll-top{top:0}
#top_btn .top_btn_wp a.scroll-bottom{top:44px}
#top_btn .top_btn_wp a.scroll-center{top:22px}
반응형
'웹랩 > JavaScript' 카테고리의 다른 글
Prefix free 플러그인 (0) | 2018.05.30 |
---|---|
jQuery 셀렉터(선택자) : 원하는 노드를 얻는 방법 (0) | 2017.11.05 |
jQuery (2) | 2016.08.08 |
split 함수를 이용하여 URL주소를 배열로 받기 (0) | 2016.07.25 |
jquery offset()을 이용한 부드러운 스크롤 이동 (0) | 2016.07.25 |