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 | #bac k- top { position : fixed ; bottom : 30px ; margin-left : -150px ; } #bac k- 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: 1 s; -moz-transition: 1 s; transition: 1 s; } #bac k- top a:hover { color : #000 ; } /* arrow icon (span tag) */ #bac k- 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: 1 s; -moz-transition: 1 s; transition: 1 s; } #bac k- 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