스크롤하면 나타나는 애니메이션 효과 Top 버튼 (퍼옴)

1 html

?

1 2 3

<p id="back-top">     <a href="#top">Back To Top</a> </p>

2 CSS

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

#back-top {     position: fixed;     bottom: 30px;     margin-left: -150px; }   #back-top a {     width: 108px;     display: block;     text-align: center;     font: 11px/100% Arial, Helvetica, sans-serif;     text-transform: uppercase;     text-decoration: none;     color: #bbb;       /* transition */     -webkit-transition: 1s;     -moz-transition: 1s;     transition: 1s; } #back-top a:hover {     color: #000; }   /* arrow icon (span tag) */ #back-top span {     width: 108px;     height: 108px;     display: block;     margin-bottom: 7px;     background: #ddd url(up-arrow.png) no-repeat center center;       /* rounded corners */     -webkit-border-radius: 15px;     -moz-border-radius: 15px;     border-radius: 15px;       /* transition */     -webkit-transition: 1s;     -moz-transition: 1s;     transition: 1s; } #back-top a:hover span {     background-color: #777; }

3 Jquery

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// hide #back-top first $("#back-top").hide();   // fade in #back-top $(function () {     $(window).scroll(function () {         if ($(this).scrollTop() > 100) {             $('#back-top').fadeIn();         } else {             $('#back-top').fadeOut();         }     });       // scroll body to 0px on click     $('#back-top a').click(function () {         $('body,html').animate({             scrollTop: 0         }, 800);         return false;     }); });

*튜토리얼 : http://webdesignerwall.com/tutorials/animated-scroll-to-top
*데모 : http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html