Created
April 19, 2012 12:27
-
-
Save kathangeorg/2420700 to your computer and use it in GitHub Desktop.
Back to top jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p id="back-top"> | |
<a href="javascript:;"><span></span>Back to Top</a> | |
</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
$(document).ready(function(){ | |
// 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; | |
}); | |
}); | |
}); | |
</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
http://webdesignerwall.com/tutorials/animated-scroll-to-top |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tt_content.stdWrap.innerWrap2 = |<p id="back-top"><a href="javascript:;"><span></span>Nach oben</a></p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment