<!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>&darr; scroll down</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>더내려~~~~</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</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
블로그 이미지

스마트전

,