http://gogoke1.blog.me/20202666575
원리는 이래요.. CSS 스타일 중 position 항목에서 fixed 라는 값이 있는데,
이걸 사용하면 화면이 스크롤 되어도 일정 위치에 표시가 됩니다. 말 그대로 position 을 fixed 하는 거에요..
대체로는 left:10px 와 top:10px 과 같이 왼쪽 위를 기준으로 세팅을 하는데,
오른쪽 위에 하려면 right:10px 과 top:10px 처럼 수치를 조정하면 됩니다.
왼쪽 아래는 left:10px 과 bottom:10px, 오른쪽 아래는 right:10px 과 bottom:10px 이렇게 하면 되겠네요.
이걸 자바스크립트로 화면 사이즈를 재고, 화면 스크롤 할 때마다 어떻게 하고 이렇게 고민할 필요가 없습니다.
그런데, 화면이 위 아래로 스크롤 될 때 스크롤 되는 거리를 고려해서..
처음엔 '맨위로 가기' 버튼이 나오지 않다가, 일정 거리 이상 스크롤이 되면 표시되게 하려면..
역시나 자바스크립트 코드가 필요하겠네요. 여기서는 jquery 를 사용해 볼께요..
샘플은 아래와 같습니다.
혹시 위로 가기 버튼이 여럿 있을까봐.. top 을 class 로 세팅했어요. 1번만 있다면 id 로 하면 되겠죠..
이미지에 a 태그를 달았는데, a 태그가 없으면 cursor:hand 를 설정해도 크롬에서 손 모양이 나오지 않기도 하더군요.
a 태그에 href="#" 를 달았는데, 사실 이건 작동하지 않도록 document ready 에 기능을 추가했어요. # 으로 하면 화면이 번쩍이거든요..
.top 아래에 a 태그가 여럿일수도 있겠지만 여기서는 하나만 있으니까 그냥 '.top a' 를 클릭하는 걸로 합니다.
버튼이 표시되거나 없어질 때 fadeIn() 과 fadeOut() 을 사용해서 부드럽게 처리했어요.
html 이나 body 둘 다 없는 .html 파일은 없겠죠.. 그러나, 간혹 둘 중 하나가 없기도 해서 둘다 세팅해서 animate 를 돌리는 거에요.
animate 에 slow 를 달았지만, 스크롤이 많이되었다면 웹브라우저가 알아서 빨리 스크롤 해 줍니다. 안 그런 브라우저는 바보.
<!doctype html>
<html lang="ko"
<head>
<style>
.top { position:fixed;left:550px;bottom:15px; z-index:999; display:none; }
</style>
</head>
<body>
<div class="top"><a href="#"><img src="위로 가기 이미지" /></a></div>
<div style="width:10px; height:5000px"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100) $('.top').fadeIn('slow'); // 100 픽셀을 초과하여 스크롤 된 다음 표시
else $('.top').fadeOut('slow'); // 100 픽셀 이하인 경우 숨김
});
$('.top a').click(function () { //
$('html, body').animate({ scrollTop:0 }, 'slow');
return false;
});
});
</script>
</body>
</html>
'Local Oriented > jQuery' 카테고리의 다른 글
| 글자효과 jquery 플러그인 (0) | 2014.07.23 |
|---|---|
| 점점 투명하게 하기 (0) | 2014.07.15 |
| jQuery 로 input[type="file"] 값 리셋하기 (0) | 2014.04.23 |
| jquery 플러그인, http://www.sticklr.net/ (0) | 2014.04.14 |
| jQuery 구조와 기능 (0) | 2014.03.27 |