스크립트 정리좀 부탁드립니다.
본문
제가 영 초보라서 정리가 필요한데 도와주세요.
<script type="text/javascript" charset="utf-8">
$( document ).ready( function() {
$( window ).scroll( function() {
if ( $( this ).scrollTop() > 100 ) {
$( '.go-up' ).fadeIn();
$( '.go-center' ).fadeIn();
$( '.go-down' ).fadeIn();
} else {
$( '.go-up' ).fadeOut();
$( '.go-center' ).fadeOut();
$( '.go-down' ).fadeOut();
}
});
});
$(function() {
$(".go-up").on("click", function(e) {
e.preventDefault();
$("html, body").animate({scrollTop:0}, '500');
return false;
});
$(".go-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}, '500');
return false;
});
$(".go-down").on("click", function(e) {
e.preventDefault();
var scrollBottom = $("html,body").scrollTop + $("html,body").height();
$("html, body").animate({scrollTop:$(document).height()}, '500');
return false;
});
});
</script>
이게 동작은 잘 되는데 뭔가 부족한 느낌이 많습니다.
잘 좀 부탁 드립니다.
답변 2
<상단으로, 중간으로, 하단으로> 버튼 처리 스크립트로 보여집니다.
후반부 각 버튼 클릭에 대한 이동 처리부분은 특별히 정리할 부분이 없어 보입니다.
전반부, 아래로 스크롤을 조금 한 시점부터 해당 버튼들이 나오고, 그렇지 않으면 숨기는 처리는..
세 버튼을 포함하는 div 같은 것이 있다면
<div id="go_btn">
up button
center button
down button
</div>
다음과 같이 줄여주는 것이 가능합니다.
id 인 경우에는 #, class 인 경우에는 .으로 셀렉터 처리가 가능합니다. https://www.w3schools.com/jquery/jquery_selectors.asp
$(document).ready(function() {
$( window ).scroll( function() {
if ($(this).scrollTop() > 100 ) {
$('#go_btn').fadeIn();
} else {
$('#go_btn').fadeOut();
}
});
});
빠르고 정확한 답변에 머리숙여 감사드립니다. 대단히 감사합니다.
