Learn free online HTML5, javascript, and jquery Tutorials by Examples

Sunday 18 May 2014

scroll to top jquery

------------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
        $(document).ready(function(){
$("#back-top").hide();

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();

} else {
$('#back-top').fadeOut();
}
});

$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
        </script>

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

<style>
    #back-top {bottom: 0px;position: fixed;right: 6%; opacity:1;text-indent: -9999px;}
        #back-top:hover{opacity:0.6;}
        #back-top a{background:url(../images/btp.png) no-repeat; width:64px; height:70px; display:block;}
   </style>
------------------------------------------------

No comments:

Post a Comment