[CSS] 스크롤 버튼 적용하는 방법
이전에 애니메이션 버튼 '이미지' 만드는 포스팅에 이어지는, 웹페이지에 코딩으로 적용하는 방법입니다.
애니메이션 버튼 만드는 방법이 필요하시면 아래 포스팅 참고하셔도 됩니다만, 굳이 애니메이션 효과 필요 없다면 단순하게 버튼만 넣어도 상관은 없습니다.
[Design [Lessons & tips]/PS] - [PS] GIF 적용해서 애니메이션 버튼 이미지 만드는 방법
[PS] GIF 적용해서 애니메이션 버튼 이미지 만드는 방법
GIF 적용해서 애니메이션 버튼 만드는 방법 이런 애니메이션 버튼을 만들기 위해서는 소스가 필요합니다. 버튼으로 사용될 기본적인 화살표 같은 소스를 먼저 구하거나 만들어야 하고
gkkl.tistory.com
일반
마우스 오버용
미리 만들어 둔 버튼을 업로드 해야 합니다.
1. 파일 업로드
티스토리 기준으로 설명하면 블로그 관리 페이지에 들어가서
스킨 편집
우측에 보이는 html 편집
상단의 파일업로드
하단의 +추가 버튼 누르고 올릴 파일 경로를 찾아 선택하시면
파일이 올라간 경로와 파일명을 확인할 수 있습니다.
2. html, css에 코드 붙여넣기
HTML
상단 HTML 버튼을 누르면 HTML 페이지로 이동합니다.
아래 코드를 복사해서 가장 아래쪽의 </body>와 </html>사이에 붙여 넣습니다.
|
<!-- 스크롤바 제어메뉴 시작 ---> <script language="JavaScript">
$(function(){
$("#scrollmenu").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100){$("#scrollmenu").fadeIn();}
else{$("#scrollmenu").fadeOut();}
});
});
function goTop(){
window.scrollTo(0,0); //맨위로
}
function goMiddle(){
var scrm = document.body.scrollHeight /2.5;
window.scrollTo(0,scrm); //중간쯤 위치를 입맛에 맞게 조절하세요.
}
function goBottom(){
var scr = document.body.scrollHeight; //페이지의 길이를 체크
window.scrollTo(0,scr); //맨아래로
}
//-->
</script>
<div id='scrollmenu' name="scrolltop">
<p class="s_123"><a href="javascript://" class="top" onclick="goTop(); return false;"><img src="./images/s_top.png" onmouseover="this.src='./images/s_top_o.gif'" onmouseout="this.src='./images/s_top.png'" border="0" title="위로"></a></p>
<p class="s_123"><a href="javascript://" class="bottom" onclick="goBottom(); return false;"><img src="./images/s_bottom.png" onmouseover="this.src='./images/s_bottom_o.gif'" onmouseout="this.src='./images/s_bottom.png'" border="0" title="아래로"></a></p>
</div>
<script language="JavaScript">
<!--
var hightop = document.body.clientHeight;
if (hightop <= 2000){ // 페이지 길이가 2000px 이하일때는 메뉴숨김
document.getElementById('scrollmenu').style.display = "none";
}
else if (hightop > 3000){ // 페이지 길이가 3000px 이상일때는 메뉴보임
document.getElementById('scrollmenu').style.display = "block";
}
//-->
</script>
<!--- 스크롤바 제어메뉴 끝 -->
|
CSS
상단 CSS 버튼을 눌러 CSS 페이지로 이동해서 아래 코드를 아무 곳에나 붙여 넣습니다.
|
#scrollmenu { display: none;
position: fixed;
right: 20px;
bottom: 40px;
height: 40px; // 위치
width: 30px; // 아이콘 크기
text-decoration: none;
}
.s_123 {margin:0 auto; padding:2px 0; // 버튼 사이 간격
} |
position의 right 값은 우측으로 부터의 여백, bottom과 height 값은 아래로부터의 여백입니다.
width는 아이콘 크기에 맞게 넣어주시면 됩니다.
padding:2px 부분은 버튼과 버튼 사이 간격값입니다.
