<!doctype html>
모바일웹 이나 웹을 만들경우 스크롤을 내렸을 경우 다시 Top 으로 올라갈 때 유저가 불편할 수 있으므로 어느정도 스크롤을 내리면 위로 자동으로 올려주는 기능이 필요합니다.~
그래서 간단히 구현한 위로 올라가기 animate 으로 화면을 이쁘게~
TEST
http://jjh889.lovepc.net/c/demo-scroll-top/scrolltotop.html
<html lang="kr">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#back-top").hide();
//alert($(window).height()); // 윈도우 크기 현재 창
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) { // 스크롤 내린 크기
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 300); // 애니메이션 속도 작을 수록 빨라요~
return false;
});
});
});
</script>
<style>
body {
font: .88em/150% Arial, Helvetica, sans-serif;
margin: 30px auto;
}
h1 {
font: bold 80%/120% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 10px;
color: #999;
}
h2 {
font-size: 2.5em;
margin: 0 0 8px;
}
h3 {
font-size: 1.6em;
margin: 20px 0 5px;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F30;
}
p {
margin: 0 0 10px;
}
em {
font: italic 100% "Times New Roman", Times, serif;
}
.credits {
border-bottom: solid 1px #eee;
padding-bottom: 10px;
margin: 0 0 30px;
}
#pagewrap {
margin: 0 auto;
width: 600px;
padding-left: 150px;
position: relative;
}
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top a:hover span {
background-color: #777;
}
</style>
</head>
<body id="top">
<div id="pagewrap">
<h1>Seok-In</h1>
<h2><a href="http://smartjuho.tistory.com/">스크롤 테스트</a></h2>
<p class="credits"><em>by <a href="http://smartjuho.tistory.com/">juho</a></em></p>
<p>↓ scroll down</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>더내려~~~~</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p>←</p>
<p id="back-top">
<a href="#top"><span></span>▲ 위로 gogo ▲</a>
</p>
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| JQuery 와 Prototype 충돌 방지 (0) | 2012.07.09 |
|---|---|
| jquery 유효성 검사 (0) | 2012.02.09 |
| XML HTML로 로드 하기 (0) | 2012.01.10 |
| jquery 동적 js 실행 (0) | 2012.01.10 |
| jQuery json load (0) | 2012.01.10 |
스마트전